🧭 Mermaid Diagram Viewer CLI

✨ A sleek Node.js CLI tool to view, edit, and export Mermaid diagrams — powered by 🐚 commander, ⚡ TailwindCSS, and 🧠 Mermaid.js.

📸 Screenshot

🎨 Features

• ✅ Beautiful HTML Preview — dark mode using TailwindCSS 🌙
• ✅ Split View — source on the left, live-rendered diagram on the right 🪞
• ✅ Live Editing — instantly re-render as you type ✍️
• ✅ Zoom In / Out — smooth control for detailed diagrams 🔍
• ✅ Export Options — download as SVG 🖼️ or PNG 📸
• ✅ Keyboard Shortcuts — save & refresh with ease ⌨️
• ✅ Local File Support — provide a .mmd file via CLI

🚀 Installation

npm install -g mermaid-viewer-cli

or run directly with npx:

npx mermaid-viewer-cli -f diagram.mmd

⚙️ Usage

🔧 Basic Command

mermaid-viewer -f your-diagram.mmd

📂 Options

| Option | Description | | --------------------- | ----------------------------------------------- | | -f, --file <path> | Path to the Mermaid file (.mmd or .mermaid) | | -p, --port <number> | Specify port for local preview (default: 3000) |

🧑‍💻 Live Editing

• 💡 The left pane is your editable Mermaid source code.
• 🪄 The right pane shows the rendered diagram in real time.
• 🧷 Press Ctrl+S (or Cmd+S) to save changes back to the file.

📤 Export Options

At the top-right corner, you’ll find export buttons:

• 🖼️ Download SVG — for scalable vector diagrams

(Make sure you allow pop-ups in your browser for download dialogs.)

🌈 Example

Here’s a sample Mermaid file you can test with:

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Awesome! 🎉]
    B -->|No| D[Check your syntax 🧩]
    D --> B

Save it as example.mmd, then run:

mermaid-viewer -f example.mmd

🧾 Example Output

🖥️ The app opens a browser window that looks like this:

+-------------------------------------------+-------------------------------------------+
| 📝 Mermaid Source                         | 🧩 Live Diagram                            |
|-------------------------------------------|-------------------------------------------|
| graph TD                                  |     [Rendered Flowchart]                  |
|   A --> B                                 |                                           |
|   B --> C                                 |                                           |
|-------------------------------------------|-------------------------------------------|
| Ctrl+S to save · Zoom controls · Export   |                                           |
+-------------------------------------------+-------------------------------------------+

Salesforce sandboxes example

flowchart TB

    %% Colors
    classDef dev fill:#4ade80,stroke:#166534,color:#fff;          %% green
    classDef int fill:#60a5fa,stroke:#1e3a8a,color:#fff;          %% blue
    classDef qa fill:#fbbf24,stroke:#92400e,color:#fff;           %% amber
    classDef uat fill:#f472b6,stroke:#9d174d,color:#fff;          %% pink
    classDef preprod fill:#a78bfa,stroke:#4c1d95,color:#fff;      %% purple
    classDef prod fill:#ef4444,stroke:#7f1d1d,color:#fff;         %% red

    %% Nodes
    DEV1["Dev Sandbox 1"]
    DEV2["Dev Sandbox 2"]
    DEV3["Dev Sandbox 3"]

    INT["Integration Sandbox"]
    QA["QA Sandbox"]
    UAT["UAT Sandbox"]
    PREPROD["Pre-Prod Sandbox"]
    PROD["Production Org"]

    %% Flow
    DEV1 --> INT
    DEV2 --> INT
    DEV3 --> INT

    INT --> QA
    QA --> UAT
    UAT --> PREPROD
    PREPROD --> PROD

    %% Apply classes
    class DEV1,DEV2,DEV3 dev
    class INT int
    class QA qa
    class UAT uat
    class PREPROD preprod
    class PROD prod

🧑‍🎨 Future Enhancements

• 🧭 Multiple tabs for multiple diagrams
• 🧱 Syntax highlighting for Mermaid editor
• 🔄 Auto-save + diagram history snapshots

🧡 Credits

Built with ❤️ by Mohan Chinnappan