Mermaid Studio

Mermaid Studio

Overview

This public intake copy packages packages/skills-catalog/skills/(tooling)/mermaid-studio from https://github.com/tech-leads-club/agent-skills into the native Omni Skills editorial shape without hiding its origin.

Use it when the operator needs the upstream workflow, support files, and repository context to stay intact while the public validator and private enhancer continue their normal downstream flow.

This intake keeps the copied upstream files intact and uses the external_source block in metadata.json plus ORIGIN.md as the provenance anchor for review.

Mermaid Studio Expert-level Mermaid diagram creation, validation, and multi-format rendering. Creates diagrams from descriptions or code analysis, validates syntax, and renders to SVG, PNG, or ASCII with professional theming.

Imported source sections that did not map cleanly to the public headings are still preserved below or in the support files. Notable imported sections: Modes of Operation, C4 Diagrams — Mandatory Styling Guide, Output Conventions.

When to Use This Skill

Use this section as the trigger filter. It should make the activation boundary explicit before the operator loads files, runs commands, or opens a pull request.

• Read references/code-to-diagram.md for the analysis methodology
• Analyze the codebase to identify the right diagram type:
• Module dependencies → Flowchart or Class diagram
• API routes and handlers → Sequence diagram
• Database models/schemas → ERD
• Service architecture → C4 Container or Architecture diagram

Operating Table

Workflow

This workflow is intentionally editorial and operational at the same time. It keeps the imported source useful to the operator while still satisfying the public intake standards that feed the downstream enhancer flow.

1. What to diagram — system, flow, schema, architecture, code structure?
2. Which diagram type — use the Decision Matrix below
3. Output format — code only, SVG, PNG, or ASCII?
4. Theme preference — ask only if rendering; default to base theme with curated palette
5. User describes... - Diagram Type - Syntax keyword
6. Process, algorithm, decision tree, workflow - Flowchart - flowchart TD/LR
7. API calls, message passing, request/response - Sequence - sequenceDiagram

Imported Workflow Notes

Imported: Step 1: Understand the Request

Before writing any Mermaid code, determine:

1. What to diagram — system, flow, schema, architecture, code structure?
2. Which diagram type — use the Decision Matrix below
3. Output format — code only, SVG, PNG, or ASCII?
4. Theme preference — ask only if rendering; default to base theme with curated palette

Diagram Type Decision Matrix

If the user's description doesn't clearly map to one type, suggest 2-3 options with a brief rationale for each, then let them choose.

When to Load References

Load reference files ONLY when needed for the specific diagram type:

• C4 diagrams → Read references/c4-architecture.md BEFORE writing code
• AWS/Cloud architecture → Read references/aws-architecture.md BEFORE writing code
• Code-to-diagram → Read references/code-to-diagram.md BEFORE analyzing
• Theming/styling → Read references/themes.md when user requests custom themes
• Syntax errors → Read references/troubleshooting.md when validation fails
• Any diagram type details → Read references/diagram-types.md for comprehensive syntax

Imported: Step 2: Create the Diagram

2.1 — Write Mermaid Code

Follow these principles in order of priority:

1. Elegance first — every diagram must look professional with init directives and curated colors
2. Correctness — valid syntax that renders without errors
3. Clarity — meaningful labels, logical flow direction, clear relationships
4. Simplicity — under 15 nodes per diagram; split complex systems into multiple
5. Consistency — uniform naming (camelCase for IDs, descriptive labels in brackets)

2.2 — Structure Rules

%% Diagram: [Purpose] | Author: [auto] | Date: [auto]
%%{init: {'theme': 'base', 'themeVariables': { ... }}}%%
[diagramType]
    [content]

CRITICAL: The %%{init} directive MUST go on the very first non-comment line, BEFORE the diagram type declaration. Alternatively, use YAML frontmatter at the absolute start of the file.

Naming conventions:

• Node IDs: camelCase, descriptive (orderService, not s1)
• Labels: natural language in brackets ([Order Service])
• Relationships: action verbs ("Sends order to", "Reads from")

Layout best practices:

• TD (top-down) for hierarchical flows and processes
• LR (left-right) for timelines, pipelines, and sequential processes
• RL for right-to-left reading contexts
• Use subgraph to group related nodes; name subgraphs meaningfully
• Add direction inside subgraphs when needed for different flow

2.3 — Quick Reference Examples

Flowchart (with professional styling):

%%{init: {'theme': 'base', 'themeVariables': {
  'primaryColor': '#4f46e5', 'primaryTextColor': '#fff',
  'primaryBorderColor': '#3730a3', 'lineColor': '#94a3b8',
  'secondaryColor': '#10b981', 'tertiaryColor': '#f59e0b',
  'background': '#ffffff', 'mainBkg': '#f8fafc',
  'nodeBorder': '#cbd5e1', 'clusterBkg': '#f1f5f9',
  'clusterBorder': '#e2e8f0', 'titleColor': '#1e293b',
  'edgeLabelBackground': '#ffffff'
}}}%%
flowchart TD
    Start([Start]) --> Input[/User Input/]
    Input --> Validate{Valid?}
    Validate -->|Yes| Process[Process Data]
    Validate -->|No| Error[Show Error]
    Error --> Input
    Process --> Save[(Save to DB)]
    Save --> End([End])

For sequence diagram and ERD styling examples, read references/themes.md.

C4 Context (with MANDATORY elegant styling):

C4Context
    title System Context — E-Commerce Platform

    Person(customer, "Customer", "Places orders online")
    System(platform, "E-Commerce Platform", "Handles orders and payments")
    System_Ext(payment, "Payment Gateway", "Processes transactions")
    System_Ext(email, "Email Service", "Sends notifications")

    Rel(customer, platform, "Uses", "HTTPS")
    Rel(platform, payment, "Processes payments", "API")
    Rel(platform, email, "Sends emails", "SMTP")

    UpdateRelStyle(customer, platform, $textColor="#475569", $lineColor="#94a3b8")
    UpdateRelStyle(platform, payment, $textColor="#475569", $lineColor="#94a3b8")
    UpdateRelStyle(platform, email, $textColor="#475569", $lineColor="#94a3b8")

    UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

Architecture (AWS with Iconify icons):

architecture-beta
    group vpc(logos:aws-vpc)[VPC]

    service api(logos:aws-api-gateway)[API Gateway] in vpc
    service lambda(logos:aws-lambda)[Lambda] in vpc
    service db(logos:aws-dynamodb)[DynamoDB] in vpc
    service s3(logos:aws-s3)[S3 Bucket]

    api:R --> L:lambda
    lambda:R --> L:db
    lambda:B --> T:s3

IMPORTANT: Architecture-beta diagrams with logos:* icons require icon pack registration. When rendering with the render script, use the --icons logos flag. If rendering in a markdown viewer that doesn't support icon packs, use the built-in icons (cloud, database, disk, server, internet) as fallback. Read references/aws-architecture.md for the complete icon catalog and rendering instructions.

For comprehensive syntax of ALL diagram types, read references/diagram-types.md.

Imported: Step 3: Validate

Before rendering, ALWAYS validate the Mermaid syntax:

node $SKILL_DIR/scripts/validate.mjs <file.mmd>

If validation fails:

1. Read the error message carefully
2. Consult references/troubleshooting.md for common fixes
3. Fix the syntax and re-validate
4. Maximum 3 fix attempts before asking the user for clarification

Imported: Step 4: Render

4.1 — Setup (First Run Only)

bash $SKILL_DIR/scripts/setup.sh

This auto-installs both rendering engines and icon pack dependencies. Run once per environment.

4.2 — Single Diagram Rendering

# SVG (default — best quality)
node $SKILL_DIR/scripts/render.mjs -i diagram.mmd -o diagram.svg

# PNG (for documents/presentations)
node $SKILL_DIR/scripts/render.mjs -i diagram.mmd -o diagram.png --width 1200

# ASCII (for terminals/READMEs)
node $SKILL_DIR/scripts/render-ascii.mjs -i diagram.mmd

# With icon packs (architecture-beta with AWS/tech icons)
node $SKILL_DIR/scripts/render.mjs -i diagram.mmd -o diagram.svg --icons logos,fa

The --icons flag registers Iconify packs before rendering. Packs: logos (AWS/tech), fa (Font Awesome). Use logos for AWS.

4.3 — Batch Rendering

For multiple diagrams at once:

node $SKILL_DIR/scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./rendered \
  --format svg \
  --theme default \
  --workers 4

4.4 — Available Themes

beautiful-mermaid (15): tokyo-night | tokyo-night-storm | tokyo-night-light | dracula | nord | nord-light | catppuccin-mocha | catppuccin-latte | github-dark | github-light | solarized-dark | solarized-light | one-dark | zinc-dark | zinc-light

mermaid-cli native (5): default | forest | dark | neutral | base

Custom theme: --theme base --config '{"theme":"base","themeVariables":{"primaryColor":"#4f46e5","lineColor":"#94a3b8"}}'

For the full theme catalog, read references/themes.md. The render script auto-selects the best engine (mmdc primary, beautiful-mermaid fallback, Puppeteer for icon packs).

Imported: Modes of Operation

This skill operates in three modes based on user intent:

Default to Full mode when intent is unclear.

Examples

Example 1: Ask for the upstream workflow directly

Use @mermaid-studio to handle <task>. Start from the copied upstream workflow, load only the files that change the outcome, and keep provenance visible in the answer.

Explanation: This is the safest starting point when the operator needs the imported workflow, but not the entire repository.

Example 2: Ask for a provenance-grounded review

Review @mermaid-studio against metadata.json and ORIGIN.md, then explain which copied upstream files you would load first and why.

Explanation: Use this before review or troubleshooting when you need a precise, auditable explanation of origin and file selection.

Example 3: Narrow the copied support files before execution

Use @mermaid-studio for <task>. Load only the copied references, examples, or scripts that change the outcome, and name the files explicitly before proceeding.

Explanation: This keeps the skill aligned with progressive disclosure instead of loading the whole copied package by default.

Example 4: Build a reviewer packet

Review @mermaid-studio using the copied upstream files plus provenance, then summarize any gaps before merge.

Explanation: This is useful when the PR is waiting for human review and you want a repeatable audit packet.

Best Practices

Treat the generated public skill as a reviewable packaging layer around the upstream repository. The goal is to keep provenance explicit and load only the copied source material that materially improves execution.

• Maximum 15 nodes per diagram (not 20 — fewer is more elegant)
• Use subgraph or boundaries to create whitespace and visual grouping
• Prefer LR (left-right) for process flows — it reads more naturally
• Use invisible links (A ~~~ B) to add spacing when the layout is cramped
• Node IDs: camelCase (orderService, not s1 or os)
• Labels: short, clear natural language ([Order Service])
• Arrows: action verbs with protocol info ("Sends order via gRPC")

Imported Operating Notes

Imported: Golden Rules — Elegant Diagrams by Default

Every diagram MUST follow these principles. They are not optional — they define the difference between a mediocre diagram and a gold-standard one.