mermaidjs-v11_skill

Overview

This skill creates text-based diagrams using Mermaid.js v11 declarative syntax and converts them to SVG/PNG/PDF for documentation, presentations, or web embedding. It supports 24+ diagram types including flowcharts, sequence diagrams, class and ER diagrams, Gantt charts, state diagrams, timelines, and user journeys. Use it to keep diagrams versionable, editable in plain text, and reproducible via CLI or web rendering.

How this skill works

Write diagrams in Mermaid v11 syntax inside code blocks or .mmd files and render them with the Mermaid CLI or the browser runtime. The CLI (mmdc) converts .mmd files to SVG/PNG/PDF and supports themes, custom CSS, and transparent backgrounds. In browsers or markdown, include the mermaid script and initialize it to render diagrams on page load.

When to use it

• Documenting system architecture or sequence flows in code repositories
• Embedding diagrams in markdown-based docs or knowledge bases
• Generating printable diagrams from version-controlled source files
• Prototyping user journeys, state machines, or project timelines
• Automating bulk conversion of diagram files to images in CI

Best practices

• Keep diagram logic small and focused; split large diagrams into modular files
• Use frontmatter for consistent theme and rendering options across files
• Include comments (%%) to explain complex sections without affecting output
• Store .mmd files in version control to track changes and review diffs
• Use mmdc with --cssFile for consistent styling across exports

Example use cases

• Flowchart showing onboarding steps for a web application
• Sequence diagram illustrating API calls between microservices
• Class diagram for data model documentation in a backend project
• Gantt chart for sprint planning and release timelines
• ER diagram mapping database tables and relationships for design reviews