Mermaid Diagrams

Generate and render diagrams from Mermaid syntax into PNG, SVG, or PDF using customizable themes and various diagram types.

Security Scan

The skill's files and runtime instructions align with its stated purpose (rendering Mermaid diagrams via the mermaid-cli); it requests no credentials and has no surprising behaviors.

Purpose & Capability

Name/description match the contents: the SKILL.md and README describe using @mermaid-js/mermaid-cli (mmdc) to render .mmd files. The included package.json only declares a peerDependency on the mermaid CLI. No unrelated binaries, env vars, or config paths are requested.

Instruction Scope

Instructions are narrowly scoped: write a .mmd to /tmp, run mmdc to produce PNG/SVG/PDF, return the image and optionally clean up temp files. The SKILL.md and test script only reference local temp files and the mmdc CLI; they do not read other system files, environment variables, or transmit data to external endpoints.

Install Mechanism

This is an instruction-only skill with no install spec. It instructs the user/agent to install @mermaid-js/mermaid-cli via npm (npm install -g). That is a normal dependency for this task, but installing a global npm package pulls code from the public registry — inspect the mermaid-cli package and its postinstall scripts if you have supply-chain concerns.

Credentials

No environment variables, credentials, or config paths are required. The skill only writes to /tmp and invokes mmdc, which is proportionate to rendering diagrams.

Persistence & Privilege

The skill is not always-enabled and does not request elevated/persistent privileges, nor does it modify other skills or system-wide configs. Autonomous invocation is allowed (platform default) but not combined with other red flags.

Assessment

This skill appears to do exactly what it says: generate Mermaid diagrams using the mermaid-cli. Before installing or running it, (1) install @mermaid-js/mermaid-cli from the official npm package (or inspect its contents) rather than running random scripts, (2) run the included generate-test.sh in a safe environment to verify mmdc works for you, (3) be aware that npm global installs pull code from the public registry — if you have strict supply-chain policies prefer installing in an isolated environment or using a pinned version, and (4) the skill writes temporary files to /tmp when rendering; nothing in the skill attempts to read secrets or exfiltrate data.

Mermaid Diagrams Skill

Generate diagrams from text using Mermaid.

Requirements

• @mermaid-js/mermaid-cli (npm install -g @mermaid-js/mermaid-cli)

Usage

1. Write Mermaid syntax to a .mmd file
2. Run mmdc to render PNG/SVG
3. Return the image to the user

Basic Command

mmdc -i input.mmd -o output.png -t dark -b transparent

Options

Flag	Description
-i	Input .mmd file
-o	Output file (.png, .svg, .pdf)
-t	Theme: default, dark, forest, neutral
-b	Background color (transparent, hex)
-w	Width in pixels (default: 800)
-H	Height in pixels
-s	Scale factor (default: 1, use 2-3 for high-res)
-c	Config JSON file for advanced theming

Supported Diagram Types

• Flowchart: graph TD / graph LR
• Sequence: sequenceDiagram
• Class: classDiagram
• State: stateDiagram-v2
• ER: erDiagram
• Gantt: gantt
• Pie: pie
• Mindmap: mindmap
• Timeline: timeline
• Git graph: gitGraph
• Quadrant: quadrantChart
• Block: block-beta

Workflow

1. Determine the best diagram type for what the user wants
2. Write the .mmd file to /tmp/mermaid-<name>.mmd
3. Render: mmdc -i /tmp/mermaid-<name>.mmd -o /tmp/mermaid-<name>.png -t dark -b transparent -s 2
4. Show the image to the user via Read tool
5. Clean up temp files if not needed

Example: Architecture Diagram

graph TD
    A[Client] -->|HTTPS| B[API Gateway]
    B --> C[Auth Service]
    B --> D[App Server]
    D --> E[(PostgreSQL)]
    D --> F[(Redis Cache)]

Example: Sequence Diagram

sequenceDiagram
    participant U as User
    participant A as API
    participant DB as Database
    U->>A: POST /login
    A->>DB: Validate credentials
    DB-->>A: User record
    A-->>U: JWT token

Tips

• Use graph LR for left-to-right flow, graph TD for top-down
• Keep node labels short — detail goes in tooltips or notes
• Use subgraphs to group related components
• For dark backgrounds, use -t dark -b transparent
• Scale -s 2 or -s 3 for sharp images on retina displays
• Always use pty: false when calling mmdc

Theming

For custom colors, create a config JSON:

{
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#f59e0b",
    "primaryTextColor": "#1a1a1a",
    "primaryBorderColor": "#d97706",
    "lineColor": "#6b7280",
    "secondaryColor": "#10b981",
    "tertiaryColor": "#3b82f6"
  }
}

Then: mmdc -i input.mmd -o output.png -c config.json