Syntax Reference
Frontmatter Options
---
type: mindmap | flowchart | architecture | sequence | gantt
layout: radial | left-right | top-down
direction: LR | TB | RL | BT
---
Mind Map
Use headings and bullet lists. Subtext with ~, links with [text](url).
# Central Topic
## Branch One
~Subtext appears smaller
- Leaf item
- Another leaf [link](https://example.com)
## Branch Two
- Item A
- Nested child
Flowchart
Define nodes then connect with arrows. Node types: [process], {decision}, (terminal).
---
type: flowchart
---
[Start] -> {Is Valid?}
{Is Valid?} ->|Yes| [Process Data]
{Is Valid?} ->|No| (End)
[Process Data] -> (End)
Architecture
Use @container for groups. Connect with arrows.
---
type: architecture
---
@container Frontend
[React App]
[Auth Module]
@container Backend
[API Server]
[Database]
[React App] -> [API Server]
[API Server] -> [Database]
Swim Lanes
Use @lane inside a flowchart to group nodes into lanes.
---
type: flowchart
---
@lane User
[Submit Form] -> [Wait]
@lane System
[Validate] -> {OK?}
{OK?} ->|Yes| [Save]
{OK?} ->|No| [Error]
[Submit Form] -> [Validate]
Sequence Diagram
Define participants and draw messages between them. Use activate/deactivate for processing bars.
---
type: sequence
---
participant Client
participant Server as "API Server"
Client ->> Server: POST /login
activate Server
Server -->> Client: 200 OK + token
deactivate Server
note over Server: Logs request
loop Every 5 min
Client ->> Server: Heartbeat
Server -->> Client: ACK
end
Gantt / Timeline
Define tasks with dates or durations. Use section to group. States: done, active, crit.
---
type: gantt
---
title Project Plan
section Phase 1
Research: done, start 2025-01-06, end 2025-01-17
Design: active, start 2025-01-13, 10d
Review: milestone, 2025-01-24
section Phase 2
Build: crit, start 2025-01-27, end 2025-02-14
Test: start 2025-02-10, 5d