Roam Research Docs · Help & user documentation

Mermaid Diagrams

• An embedded version of MermaidJS, create mermaid diagrams inside of Roam!
  • To read more about Mermaid syntax see https://mermaid.js.org/intro/
• To create a mermaid diagram
  • type /mermaid and select it from the dropdown or copy and paste {{mermaid}} into a new block
  • It will look like below
  • {{mermaid}}
• Examples::
  • Flowchart
    • {{mermaid}}
      • flowchart TB
        • A --> C
        • A --> D
        • B --> C
        • B --> D
  • Sequence Diagram
    • {{mermaid}}
      • sequenceDiagram
        • Alice->>John: Hello John, how are you?
        • John-->>Alice: Great!
        • Alice-)John: See you later!
  • Gantt Chart
    • {{mermaid}}
      • gantt
        dateFormat YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        excludes weekends
        %% (excludes accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
        
        section A section
        Completed task :done, des1, 2014-01-06,2014-01-08
        Active task :active, des2, 2014-01-09, 3d
        Future task : des3, after des2, 5d
        Future task2 : des4, after des3, 5d
        
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison :crit, done, after des1, 2d
        Create tests for parser :crit, active, 3d
        Future task in critical line :crit, 5d
        Create tests for renderer :2d
        Add to mermaid :until isadded
        Functionality added :milestone, isadded, 2014-01-25, 0d
        
        section Documentation
        Describe gantt syntax :active, a1, after des1, 3d
        Add gantt diagram to demo page :after a1 , 20h
        Add another diagram to demo page :doc1, after a1 , 48h
        
        section Last section
        Describe gantt syntax :after doc1, 3d
        Add gantt diagram to demo page :20h
        Add another diagram to demo page :48h
• Themes::
  • You can set the theme for an individual diagram like this
    • %%{init: {"theme": "forest"}}%%
    • {{mermaid}}
      • %%{init: {"theme": "forest"}}%%
        stateDiagram-v2
          direction LR
          state [OPEN] {
            IDEA --> DRAFT
            DRAFT --> PENDING
            PENDING --> APPROVED
            PENDING --> REJECTED
            PENDING --> DRAFT
            APPROVED --> ACTIVE
            ACTIVE --> INACTIVE
            INACTIVE --> ACTIVE
            INACTIVE --> DRAFT
            ACTIVE --> DRAFT
            INACTIVE --> RETIRED
            RETIRED --> DRAFT
          }
          state [CLOSED] {
            REJECTED
            RETIRED
          }
        state [What] {
            TEST
            HEY
          }
  • You can set the default theme with custom css
    • {{roam/css}}

      • :root {
          --mermaidjs-theme: dark;
        }

    • You will have to reload the page after applying this for it to take affect
    • See the docs for possible themes
• Roam Team Videos::
  • Mermaid diagrams combined with version control in Roam Research by Conor White-Sullivan
    • {{video: https://www.youtube.com/watch?v=UF22iK8fX-A&t}}
      #Version Control | #Diagram

markdown version · view in Roam Research · exported 2026-07-03