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

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

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.

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.

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

Verify mmdc availability:

bash

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

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

Example diagram.mmd:
mermaid
```
flowchart TD
    A[Idea] --> B[AI Agent]
    B --> C[Design]
    C --> D[Code]
    D --> E[Test]
    E --> F[Deploy]
```
Generate Image: Use pnpm dlx to run the Mermaid CLI and convert the .mmd file to an image (SVG recommended for scalability).
bash
```
pnpm dlx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.svg
```
For PNG output:
bash
```
pnpm dlx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.png
```