Mermaid Diagram Generator

Generate high-quality Mermaid diagram code based on user requirements.

Workflow

1. Understand Requirements: Analyze user description to determine the most suitable diagram type
2. Read Documentation: Read the corresponding syntax reference for the diagram type
3. Generate Code: Generate Mermaid code following the specification
4. Apply Styling: Apply appropriate themes and style configurations

Diagram Type Reference

Select the appropriate diagram type and read the corresponding documentation:

Configuration & Themes

• Theming – Custom colors and styles
• Directives – Diagram-level configuration
• Layouts – Layout direction and spacing
• Configuration – Global settings
• Math – LaTeX math support

Output Specification

Generated Mermaid code should:

1. Be wrapped in “`mermaid code blocks
2. Have correct syntax that renders directly
3. Have clear structure with proper line breaks and indentation
4. Use semantic node naming
5. NO COLOR STYLING – Keep diagrams clean and simple without colors
6. Use minimal, professional style focusing on clarity

Default Style Guidelines

IMPORTANT: Follow these style rules for all diagrams:

• ✅ NO custom colors – Use default styling only
• ✅ White/transparent background – Clean and professional
• ✅ Minimal nodes – Only essential information
• ✅ Clear labels – Concise text without redundancy
• ✅ Simple structure – Linear flows preferred over complex graphs

Gantt Chart Style (Recommended for timelines and schedules):

• Use gantt type for project timelines, schedules, roadmaps
• Clean section-based organization
• Milestones for key achievements
• No custom colors needed

When generating PNG with mmdc:

# Use professional theme with config
mmdc -i diagram.mmd -o diagram.png -w 1200 -H 600 -b white -c config.json

Professional Theme Config (create as config.json):

Option 1: Clean Business Style (Recommended)

{
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#ffffff",
    "primaryTextColor": "#333333",
    "primaryBorderColor": "#1976d2",
    "lineColor": "#888888",
    "secondaryColor": "#f5f5f5",
    "tertiaryColor": "#e3f2fd",
    "tertiaryBorderColor": "#1976d2",
    "tertiaryTextColor": "#1565c0",
    "fontFamily": "Inter, Segoe UI, Roboto, sans-serif",
    "fontSize": "12px"
  },
  "flowchart": {
    "curve": "cardinal",
    "nodeSpacing": 50,
    "rankSpacing": 50,
    "padding": 20
  },
  "gantt": {
    "titleTopMargin": 25,
    "barGap": 4,
    "topPadding": 50,
    "sidePadding": 75,
    "gridLineStartPadding": 10,
    "fontSize": 12,
    "sectionFontSize": 14
  }
}

Option 2: Neutral Print Style (For PDF/Print)

{
  "theme": "neutral",
  "themeVariables": {
    "fontFamily": "Inter, sans-serif",
    "fontSize": "12px"
  },
  "flowchart": {
    "curve": "basis",
    "nodeSpacing": 50,
    "padding": 20
  }
}

Advanced Styling with classDef:

%%{init: {'theme':'base', 'themeVariables': {'primaryColor':'#fff','primaryBorderColor':'#1976d2','fontFamily':'Inter'}}}%%
graph LR
    A[Input] --> B[Process]
    B --> C[Output]

    classDef clean fill:#ffffff,stroke:#1976d2,stroke-width:2px,color:#333
    classDef highlight fill:#e3f2fd,stroke:#1976d2,stroke-width:2px,color:#1565c0

    class A,C clean
    class B highlight

This creates modern, polished diagrams with:

• ✨ Professional Neo-inspired look
• 📐 Optimal spacing and padding
• 🎨 Subtle blue accent (#1976d2)
• 🔤 Modern typography (Inter font)
• 📊 Clean gantt chart styling

Avoid:

• ❌ Multiple colors (style fill:#color)
• ❌ Complex nested subgraphs
• ❌ Excessive node styling
• ❌ Decorative elements

Example Output

Simple Flowchart (No colors):

flowchart LR
    A[Start] --> B[Process]
    B --> C[End]

Gantt Chart (Recommended for timelines):

gantt
    title Project Timeline
    dateFormat YYYY-MM
    section Phase 1
    Task 1           :2026-02, 2026-03
    Task 2           :2026-03, 2026-04
    section Phase 2
    Task 3           :2026-04, 2026-05
    Milestone        :milestone, 2026-05, 0d

Simple Process Flow:

graph LR
    A[Input] --> B[Process]
    B --> C[Output]

User requirements: $ARGUMENTS