mermaid-creator

name

mermaid-creator

description

Use proactively whenever generating Mermaid diagram code in any context (markdown blocks, .md files, docs). Covers flowcharts, sequence, class, state, ER, gantt, pie, mindmaps, timelines, and all Mermaid types. Applies strict syntax rules to prevent rendering errors (HTML tags, style directives, invalid escapes). No explicit request needed — load automatically when Mermaid syntax is being produced.

Mermaid Creator

Generate valid, error-free Mermaid diagrams following strict syntax rules and best practices.

Core Principles

1. NO HTML tags - Never use <br/>, <br>, or any HTML in any part of the diagram
2. NO style directives - Never use style, fill, stroke, classDef, or color specifications
3. Simple labels - Keep text concise, avoid special characters or escape them properly
4. Validate syntax - Always check against common error patterns before finalizing

Quick Start

When generating any Mermaid diagram:

1. Identify the diagram type (sequence, flowchart, class, state, ER)
2. Use only the patterns from syntax-guide.md
3. Avoid all forbidden patterns listed below
4. Keep labels short and simple

Forbidden Patterns

These ALWAYS cause errors - never use:

❌ participant User<br/>Browser          (HTML tags)
❌ A[Label<br/>with breaks]              (HTML in labels)
❌ style A fill:#ff0000                  (Style directives)
❌ classDef myClass fill:#f9f            (Color definitions)
❌ A --> B: Very long message<br/>text   (Line breaks in text)

Safe Patterns

Use these instead: