A TypingMind plugin for rendering Mermaid diagrams with comprehensive syntax support, icon packs, and ZenUML integration.

• Mermaid.js v11.12.2 - Latest stable version with all diagram types
• ZenUML Support - Sequence diagrams with ZenUML syntax (v0.2.2)
• Zoom Controls - Interactive zoom in/out with keyboard shortcuts
• Export Options - Download diagrams as SVG or PNG
• Icon Packs - Built-in support for multiple icon libraries:
  • Technology & Brand Logos (logos, simple-icons)
  • Material Design Icons (mdi)
  • Font Awesome 6 (fa6-solid, fa6-regular, fa6-brands)
• Error Handling - Clear error messages for syntax issues
• Responsive - Mobile-friendly diagram rendering

• Zoom Controls: 25% to 400% zoom with Ctrl/Cmd +/- keyboard shortcuts
• SVG Export: Download diagrams in vector format
• PNG Export: 2x resolution with cross-origin fallback handling
• Modern UI: Sticky header with button groups

• Flowchart (flowchart TD/LR)
• Sequence Diagram (sequenceDiagram)
• Class Diagram (classDiagram)
• State Diagram (stateDiagram-v2)
• Entity Relationship (erDiagram)
• User Journey (journey)
• Gantt (gantt)
• Pie Chart (pie)
• Quadrant Chart (quadrantChart)
• Requirement Diagram (requirementDiagram)
• Gitgraph (gitGraph)
• Mindmap (mindmap)
• Timeline (timeline)

• XY Chart (xychart-beta)
• Sankey Diagram (sankey-beta)
• Packet Diagram (packet-beta)
• Block Diagram (block-beta)
• Architecture (architecture-beta)
• Radar Chart (radar-beta)

1. Open TypingMind
2. Go to Plugins section
3. Click Add Plugin
4. Choose From GitHub URL
5. Enter: https://github.com/satwareAG/mermaid-plugin
6. Click Install

Ask the AI to create a diagram:

Create a flowchart showing the user registration process

The AI will invoke the plugin with appropriate Mermaid syntax.

You can also manually invoke the function:

{
  "function": "render_mermaid_diagram",
  "parameters": {
    "title": "User Registration Flow",
    "source": "flowchart TD\n    Start[User Opens App] --> Register[Registration Form]\n    Register --> Validate{Valid Input?}\n    Validate -->|Yes| Create[Create Account]\n    Validate -->|No| Error[Show Error]\n    Error --> Register\n    Create --> Success[Registration Complete]"
  }
}

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

sequenceDiagram
    participant User
    participant API
    participant Database
    User->>API: Login Request
    API->>Database: Validate Credentials
    Database-->>API: User Data
    API-->>User: Success Response

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Phase 1
    Planning           :a1, 2024-01-01, 30d
    Development        :a2, after a1, 45d
    section Phase 2
    Testing            :a3, after a2, 20d
    Deployment         :a4, after a3, 5d

Use icons in diagrams with the following syntax:

flowchart LR
    A[fa:fa-user User] --> B[fa:fa-server Server]
    B --> C[fa:fa-database Database]

Available icon packs:

• logos:* - Technology logos (e.g., logos:react, logos:nodejs)
• simple-icons:* - Brand icons (e.g., simple-icons:github)
• mdi:* - Material Design (e.g., mdi:account, mdi:server)
• fa6-solid:* - Font Awesome Solid
• fa6-regular:* - Font Awesome Regular
• fa6-brands:* - Font Awesome Brands

Find icons at: icones.js.org

• Function Name: render_mermaid_diagram
• Output Type: render_html
• Parameters:
  • title (string, required): Diagram title
  • source (string, required): Mermaid diagram source code

• Modern browsers with ES Module support
• Chrome 61+, Firefox 60+, Safari 11+, Edge 79+

The plugin includes comprehensive Mermaid v11 syntax requirements that guide the AI in generating valid diagrams. This ensures:

• Correct diagram prefixes
• Proper node syntax
• Valid relationship definitions
• Error-free rendering

1. Check diagram prefix is correct (e.g., flowchart TD, not graph TD)
2. Ensure node IDs are unique
3. Verify relationship syntax
4. Check for circular references (not allowed in most diagrams)

Parse errors are displayed below the diagram area with detailed error messages. Common issues:

• Missing quotes around labels with spaces
• Invalid node IDs
• Incorrect relationship syntax
• HTML tags in node definitions (not allowed)

If PNG export fails (e.g., with diagrams using external icons), the plugin automatically falls back to SVG download.

MIT License - See LICENSE file for details

satware AG

• Website: satware.ai
• GitHub: @satwareAG

For issues or questions:

• Open an issue on GitHub
• Contact: info@satware.com

Current version: 1.1.1

See CHANGELOG.md for release history.

• Mermaid.js Documentation
• TypingMind Plugins Docs
• Icon Search