skills.rest
afonsoft
afonsoftCOMMUNITY
Explore all skills by this author →
Website𝕏@afonsoftGitHub

mermaid-architecture

Generate and validate Mermaid architecture diagrams and design documents in Markdown.

Updated Jul 21, 2026
Search Tags:#documentation#markdown#mermaid#architecture diagrams#c4 model#diagram generation#design documents
One-click install
npx skills add https://github.com/afonsoft/gamehub --skill mermaid-architecture-afonsoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-architecture
Source: https://github.com/afonsoft/gamehub/tree/main/.claude/skills/mermaid-architecture
Command: npx skills add https://github.com/afonsoft/gamehub --skill mermaid-architecture-afonsoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mermaid-js/mermaid-cli, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Creating and maintaining architecture diagrams as code is error-prone: Mermaid syntax errors break rendering, diagrams drift out of sync with the codebase, and exported images require manual CLI work. This Skill provides validated diagram generation, styling rules, and document templates so architecture documentation stays consistent and renderable. ## Core Features & Use Cases - Diagram Generation & Validation: Create flowcharts, sequence, ER, class, state, C4, and deployment diagrams with a resilient script that validates syntax via mermaid-cli and retries on errors. - Image Export & Extraction: Convert .mmd files to PNG/SVG, batch-render directories, and extract or validate Mermaid blocks embedded in Markdown files. - Design Document Templates: Populate ready-made templates for architecture, system, API, database, and feature design documents stored in docs/architecture/. - Use Case: After refactoring a microservices system, ask the AI to regenerate the C4 context diagram and sequence diagrams, validate them with mmdc, and embed them in docs/architecture/system-architecture.md. ## Quick Start Generate a validated Mermaid architecture diagram of my system's API flow and save it with an exported PNG to docs/architecture/.

Frequently Asked Questions about mermaid-architecture

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

FAQPage Schema
How do I generate Mermaid architecture diagrams from code?▼

Analyze entry points like controllers and routes, trace service dependencies, and map infrastructure from docker-compose or Terraform files. Then choose the diagram type (C4, sequence, or flowchart) and write the .mmd source into docs/architecture/.

How to convert Mermaid diagrams to PNG or SVG?▼

Use the mermaid_to_image.py script with a .mmd input file and an output path, or run mmdc directly. The script supports themes, background colors, custom dimensions, and batch conversion of entire directories.

Does Mermaid rendering require mermaid-cli installed?▼

The scripts look for a global mmdc binary first and automatically fall back to npx -y @mermaid-js/mermaid-cli if it is missing. One of the two must be available for validation and image export.

Why does my Mermaid diagram fail to render?▼

Common causes include unbalanced quotes, invalid relationship syntax, trailing commas, and special characters in node labels. The troubleshooting reference documents 28 common syntax errors, and the resilient script validates and retries automatically.

When should I use draw.io instead of Mermaid diagrams?▼

Use draw.io when you need visual drag-and-drop editing with native .drawio files. Mermaid is better for diagrams-as-code that render natively in GitHub, GitLab, and Obsidian Markdown viewers.

Related Skills

Explore More Software Engineering Skills→
cndoit18cndoit18
11

excalidraw

Generate .excalidraw architecture diagrams from codebase analysis.

Community
Advanced
streamlitstreamlit
45.7k

sharing-pr-agent-artifacts

Uploads agent-generated specs and plans to the streamlit.wiki for PR sharing.

Official
Intermediate
dudqks0319-cpududqks0319-cpu

Code Explainer

Explains complex code using everyday metaphors and mermaid diagrams.

Community
Basic
qprjack86qprjack86

excalidraw

Create hand-drawn whiteboard diagrams and wireframes as editable Excalidraw JSON.

Community
Intermediate