Mermaid Diagram Generation

Mermaid Diagram Generation

This skill provides instructions for creating Mermaid diagrams and converting them to SVG or PNG images using the Mermaid CLI (mmdc).

When to Use This Skill

• User needs to visualize flows, architecture, or data structures
• User asks to create diagrams for documentation
• User wants to convert Mermaid syntax to image files
• User needs flowcharts, sequence diagrams, class diagrams, or ER diagrams

Prerequisites

• Node.js and pnpm must be installed (refer to dev-swarm-nodejs skill if needed).

Your Roles in This Skill

• Tech Manager (Architect): Design diagram structures to effectively communicate system architecture and data flows. Choose appropriate diagram types for different use cases. Ensure diagrams accurately represent technical concepts and relationships.
• DevOps Engineer: Execute Mermaid CLI commands to generate diagrams. Verify pnpm and Node.js installations. Convert Mermaid files to SVG or PNG formats. Troubleshoot diagram generation issues.

Role Communication

As an expert in your assigned roles, you must announce your actions before performing them using the following format:

As a {Role} [and {Role}, ...], I will {action description}

This communication pattern ensures transparency and allows for human-in-the-loop oversight at key decision points.

Installation

We recommend using pnpm dlx to execute the Mermaid CLI without a permanent global installation.

Verify mmdc availability:

pnpm dlx @mermaid-js/​mermaid-cli --version

Usage

1. Create a Mermaid file: Create a file with .mmd extension (e.g., diagram.mmd) containing the Mermaid diagram definition.

   Example diagram.mmd:

   flowchart TD
       A[Idea] --> B[AI Agent]
       B --> C[Design]
       C --> D[Code]
       D --> E[Test]
       E --> F[Deploy]
   

2. Generate Image: Use pnpm dlx to run the Mermaid CLI and convert the .mmd file to an image (SVG recommended for scalability).

   pnpm dlx @mermaid-js/​mermaid-cli -i diagram.mmd -o diagram.svg
   

   For PNG output:

   pnpm dlx @mermaid-js/​mermaid-cli -i diagram.mmd -o diagram.png
   

Common Diagram Types

• Flowchart: flowchart TD (Top-Down) or LR (Left-Right)
• Sequence Diagram: sequenceDiagram
• Class Diagram: classDiagram
• State Diagram: stateDiagram-v2
• Entity Relationship Diagram: erDiagram