Knowledge Center

Learn Mermaid Syntax

Browse our code recipes and tutorials. Copy sample templates or load them directly into your project workspaces.

flowchart|Beginner|4 min read

Flowchart Basics & Node Shapes

Learn how to construct flowcharts with decision forks and custom node boundaries. Flowcharts start with "flowchart TD" (top-down) or "flowchart LR" (left-right).

flowchart TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Success]
  B -->|No| D[End]

sequence|Intermediate|5 min read

Sequence Actor Timelines

Understand communication flows between distinct lifelines. Uses actor columns, solid arrow messages (->>), dashed responses (-->>), and conditional alt/else blocks.

sequenceDiagram
  autonumber
  Alice->>Bob: Hello Bob, how are you?
  alt is good
      Bob-->>Alice: I am good thanks!
  else is bad
      Bob-->>Alice: Not so good
  end

erd|Intermediate|6 min read

Entity Relationship Schemas

Map out database tables, attributes, and relationships. Learn cardinality symbols like "||--o{" to denote one-to-many associations.

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE-ITEM : contains
  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

class|Advanced|5 min read

Object-Oriented Class Structures

Model classes, variables, and methods. Displays class properties, inheritance arrows (<|--), and interface implementations.

classDiagram
  class Animal {
      +String name
      +isMammal() bool
  }
  class Duck {
      +String swimSpeed
      +quack()
  }
  Animal <|-- Duck

other|Advanced|4 min read

State Transition Machines

Track entity life cycles. Define initial states ([*]), transitions with trigger actions (-->), and terminal states.

stateDiagram-v2
  [*] --> Idle
  Idle --> Moving : Action
  Moving --> Idle : Stop
  Moving --> [*] : Shutdown

other|Beginner|3 min read

Mindmap Concept Organization

Organize ideas hierarchically starting from a root node. Ideal for brainmaps, feature lists, and architectural stack structures.

mindmap
  root((Mermaid Studio))
    Features
      Live Render
      Multiple Themes
      High-Res Export
    Stack
      Next.js
      Zustand
      Tailwind