skills.rest
leighmcculloch
leighmccullochCOMMUNITY
Explore all skills by this author →
Website𝕏@___leigh___GitHub

mermaid-diagram

Generate and validate Mermaid diagrams from user descriptions via Mermaid CLI.

1|Updated Jan 24, 2021
Search Tags:#mermaid#flowchart#diagrams#mermaid-cli#sequence-diagram#er-diagram
One-click install
npx skills add https://github.com/leighmcculloch/dotfiles --skill mermaid-diagram-leighmcculloch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-diagram
Source: https://github.com/leighmcculloch/dotfiles/tree/main/files/claude/skills/mermaid-diagram
Command: npx skills add https://github.com/leighmcculloch/dotfiles --skill mermaid-diagram-leighmcculloch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mermaid diagrams can be tricky to author and keep consistent across projects. This skill provides a reliable workflow to generate, edit, and validate diagrams using the Mermaid CLI, ensuring syntax correctness and clear layouts.

Core Features & Use Cases

  • Generate Mermaid diagrams from natural language prompts and descriptions.
  • Validate syntax with the Mermaid CLI (mmdc) and produce SVGs for review.
  • Iterate on layout with guided refinements and subgraphs to improve readability.
  • Support multiple diagram types including flowchart, sequence, state, class, and ER diagrams.
  • Export final source and rendered output for documentation or PRs.

Quick Start

Describe the diagram you want, and I will generate a Mermaid diagram and validate it with the Mermaid CLI.

Frequently Asked Questions about mermaid-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a Mermaid flowchart from a text description?▼

Generating a Mermaid flowchart from text involves translating your description into valid Mermaid source code, validating syntax with the Mermaid CLI, and returning both the diagram source and rendered SVG output.

Can I validate Mermaid syntax locally before adding it to documentation?▼

Validating Mermaid syntax locally requires the Mermaid CLI (mmdc). This skill runs mmdc to verify syntax correctness and produces an SVG file, ensuring the diagram renders clearly before adding it to documentation.

Does this approach work for sequence and ER diagrams or just flowcharts?▼

This approach supports sequence diagrams, ER diagrams, state diagrams, and class diagrams in addition to flowcharts. It generates and updates any supported Mermaid diagram type via the Mermaid CLI.

Do I need to install Mermaid CLI to use this diagram generation workflow?▼

Yes, the Mermaid CLI is required. The skill depends on mmdc to validate diagram syntax and render the SVG output, functioning within local or scripted contexts where the CLI is installed.

What is the best way to fix layout issues in complex Mermaid diagrams?▼

The best way to fix layout issues in complex Mermaid diagrams is to iterate using guided refinements and subgraphs. This skill improves readability by validating structural changes through the Mermaid CLI.

Why does my Mermaid sequence diagram fail to render as an SVG?▼

A Mermaid sequence diagram fails to render as an SVG when it contains syntax errors. This skill uses the Mermaid CLI to validate syntax, inspects the resulting SVG for clarity, and corrects the source code.

Related Skills

Explore More Software Engineering Skills→
KrismithReddy12KrismithReddy12

diagram

Convert natural language descriptions and mermaid source code into editable .excalidraw diagram files.

Community
Intermediate
robertzengcnrobertzengcn

diagram

Convert English descriptions or mermaid source into SVG, PNG, and excalidraw files.

Community
Intermediate
KrystianYCSilvaKrystianYCSilva

markdown-expert

Create Markdown documentation with Mermaid diagrams and GFM tables.

Community
Intermediate
claude-office-skillsclaude-office-skills
368

diagram-creator

Generate flowcharts, sequence diagrams, and architecture diagrams from Mermaid and PlantUML text.

Official
Intermediate