skills.rest
skyasu2
skyasu2COMMUNITY
Explore all skills by this author →
GitHub

mermaid-diagram

Generate and validate Mermaid diagrams from .mmd files into PNG/SVG outputs.

2|1|Updated May 22, 2025
Search Tags:#architecture#mermaid#validation#svg#diagram#mermaid-cli
One-click install
npx skills add https://github.com/skyasu2/openmanager-vibe-v5 --skill mermaid-diagram-skyasu2
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-diagram
Source: https://github.com/skyasu2/openmanager-vibe-v5/tree/main/.claude/skills/mermaid-diagram
Command: npx skills add https://github.com/skyasu2/openmanager-vibe-v5 --skill mermaid-diagram-skyasu2

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the creation and validation of architecture diagrams from Mermaid sources, reducing manual updates and ensuring consistency across documentation.

Core Features & Use Cases

  • Generate PNG/SVG diagrams from Mermaid sources (.mmd) using mermaid-cli (mmdc).
  • Validate Mermaid syntax and report issues to fix diagrams before embedding in docs.
  • Use Case: automatically refresh architecture diagrams in documentation when the underlying .mmd files change.

Quick Start

Use the mermaid-diagram skill to convert diagrams from docs/architecture/example.mmd to diagrams/example.svg and diagrams/example.png.

Frequently Asked Questions about mermaid-diagram

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

FAQPage Schema
How do I convert Mermaid .mmd files to SVG or PNG for documentation?▼

To convert Mermaid .mmd files to SVG or PNG, this skill uses mermaid-cli (mmdc) v11.12.0 to parse the sources and output diagrams with a dark theme and transparent background.

Can I validate Mermaid syntax before embedding diagrams in docs?▼

Yes, you can validate Mermaid syntax to report and fix issues before embedding diagrams in docs, ensuring consistency and reducing manual updates across architecture documentation.

Do I need mermaid-cli installed to generate diagrams from source files?▼

Yes, you need mermaid-cli (mmdc) v11.12.0 installed, as it is required to parse .mmd files and process Mermaid sources to generate the diagram outputs.

What is the best way to automate architecture diagram generation from Mermaid sources?▼

The best way to automate architecture diagram generation from Mermaid sources is using this skill to automatically refresh PNG or SVG outputs when underlying .mmd files change.

Does the generated SVG diagram from Mermaid support transparent backgrounds?▼

Yes, the generated SVG and PNG diagrams from Mermaid support transparent backgrounds, as the skill outputs diagrams specifically configured with a dark theme and transparent background.

Related Skills

Explore More Software Engineering Skills→
samueriosamuerio

mermaid

Validate Mermaid diagrams (.mmd files) syntax and generate SVG outputs using Mermaid CLI and Node.js.

Community
Intermediate
calesthiocalesthio
46.2k

beautiful-mermaid

Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library.

Community
Intermediate
CJ-1981CJ-1981

moai-library-mermaid

Generate Mermaid diagrams from text descriptions across 21 diagram types.

Community
Advanced
dgethingsdgethings

drawio-diagram

Generate native .drawio files and optional PNG/SVG/PDF exports with embedded XML from discovery data or templates.

Community
Advanced