🧜 Mermaid Live Editor — VS Code Extension

A powerful Mermaid.js live preview and editor for Visual Studio Code 🪶 Instantly visualize your diagrams and flows as you type — no external tools required.

Screenshots

---k

✨ Features

✅ Live Preview — See your Mermaid diagrams render in real time as you edit ✅ Bi-directional Sync — Automatically syncs with your currently opened .mmd or .mermaid file ✅ Built-in Editor & Preview Pane — Split view layout with syntax-friendly editor and responsive live preview ✅ Save & Load — Save your diagram code or open existing .mmd files directly from the extension ✅ Export Diagrams — Save rendered diagrams as:

• 🧩 SVG

✅ Dark Theme Support — Matches VS Code’s theme automatically for a seamless experience ✅ Multiple Sample Templates — Includes sequence diagrams, flowcharts, git graphs, and system diagrams

2️⃣ Open Mermaid File

Open any .mmd or .mermaid file, or create a new one:

graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Result 1]
  B -->|No| D[Result 2]

3️⃣ Launch Live Preview

Press Ctrl+Shift+P (or Cmd+Shift+P on Mac), then select:

Mermaid: Open Live Preview

A split view will open — your code on the left, live diagram on the right.

🧰 Toolbar Actions

🧠 Supported Diagram Types

You can create any diagram supported by Mermaid.js:

• Flowcharts
• Sequence Diagrams
• Class Diagrams
• Git Graphs
• State Diagrams
• Entity-Relationship (ER) Diagrams
• User Journey Maps
• Pie Charts

🧩 Sample Templates

Here are a few examples included in the extension:

🔹 Flowchart

flowchart TD
  A[User Query] --> B[LLM]
  B --> C[Vector DB]
  C --> D[Context Documents]
  D --> E[Generated Response]

🔹 Sequence Diagram

sequenceDiagram
  participant A as Alice
  participant B as Bob
  A->>B: Hello Bob
  B-->>A: Hi Alice!

RAG

flowchart TB 
  A[Reference Docs, Websites...] --> B[RAG System]  --> C[LLM] --> LLM[embeddings] --> VDB[Vector DB of embeddings]
  Q[User Query] --> E[LLM] --> F[Query Vector ] --> B  --> G[Find the relevant context docs using cosine similarity] --> H[Context Chunks] --> HH[Augmented Query - Question and context]
  HH --> I[LLM - Geneation] --> R[Response]
  B --> VDB

  style B fill:blue,stroke:#333,stroke-width:4px
  style Q fill:red,stroke:black,stroke-width:4px
  style R fill:green,stroke:#333,stroke-width:4px

🔹 Git Graph

gitGraph
  commit
  branch develop
  commit
  checkout main
  merge develop

⚙️ Technical Details

• Uses Mermaid.js v10 for rendering

• Runs entirely offline inside the VS Code Webview

• Automatically updates preview on each keystroke (debounced for performance)

• Uses VS Code APIs for:

  • File Save/Open dialogs
  • Webview messaging
  • Theming (dark/light)

💡 Tips

• Use .mmd or .mermaid file extensions for syntax highlighting.
• You can edit Mermaid code directly in your VS Code editor, and it will auto-update the preview.
• Exported SVGs are editable in vector design tools (like Figma, Inkscape, or Illustrator).

🧾 License

MIT License © 2025 Mohan Chinnappan

❤️ Acknowledgments

• Built with Mermaid.js
• Powered by the VS Code Extension API