/mermaid command

Interactive Mermaid.js diagram for any topic (23 diagram types)

At a glance

Field	Value
Command	/mermaid
Usage	`/mermaid [--topic=] [--scope=free
Category	reference
Execution	server
Context	pok
Response type	mini-canvas
Active PoK required	yes

Parameters

• topic (optional) — Topic to visualize as a mermaid diagram

Examples

/mermaid
/mermaid --topic=TCP Handshake --type=sequenceDiagram
/mermaid --scope=unit --type=classDiagram
/mermaid --scope=free --topic=OSI Model --type=flowchart
/mermaid --type=erDiagram
/mermaid --type=stateDiagram --topic=HTTP Connection States

How it works

The mermaid command creates interactive Mermaid.js diagrams for your learning content.

Supported diagram types (23):

• flowchart: Decision flows, process steps, branching logic
• sequenceDiagram: Message passing between participants over time
• classDiagram: OOP class structures with relationships
• stateDiagram: State machines with transitions
• erDiagram: Entity-Relationship database schemas
• journey: User journey maps with satisfaction scores
• gantt: Project timeline with tasks and dependencies
• pie: Proportional data visualization
• mindmap: Hierarchical concept maps
• timeline: Chronological events
• gitGraph: Git branching and merge history
• C4Context/C4Container/C4Component/C4Dynamic: C4 architecture model diagrams
• block: Generic block diagrams
• architecture: System architecture layouts
• kanban: Task boards with columns
• requirementDiagram: Requirements and their relationships
• xychart: XY scatter/line charts
• quadrantChart: 2x2 matrix analysis
• sankey: Flow quantity diagrams
• packet: Network packet structure

How it works:

1. The AI generates mermaid syntax AND structured node metadata
2. Mermaid.js renders the syntax into an interactive SVG diagram
3. Click nodes to explore descriptions and answer check questions
4. Correct answers mark nodes as completed (green checkmark)
5. Complete all nodes to see your results

Options:

• topic: Specific topic to visualize (optional - uses current topic if not specified)
• scope: Content scope - pok (current topic), unit (entire unit), all (all units), free (any topic)
• type: Diagram type (optional - AI chooses the best type if not specified)

Tips:

• Use --type=sequenceDiagram for protocol interactions and API flows
• Use --type=classDiagram for OOP designs and data models
• Use --type=stateDiagram for state machines and lifecycle flows
• Use --type=erDiagram for database schema visualization
• Use --type=C4Context for high-level system architecture