skills.rest
celeroncoder
celeroncoderCOMMUNITY
Explore all skills by this author →
Website𝕏@celeroncoderGitHub

mermaid-diagrams

Create software architecture, database, and process diagrams using Mermaid text syntax.

Updated Sep 11, 2026
Search Tags:#architecture#documentation#mermaid#flowchart#diagrams#sequence diagram#erd
One-click install
npx skills add https://github.com/celeroncoder/skills --skill mermaid-diagrams-celeroncoder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-diagrams
Source: https://github.com/celeroncoder/skills/tree/main/mermaid-diagrams
Command: npx skills add https://github.com/celeroncoder/skills --skill mermaid-diagrams-celeroncoder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Communicating system architecture, database schemas, and process flows through static images is hard to maintain and version. This Skill lets you generate professional diagrams from plain text definitions that live alongside your code and update as your system evolves. ## Core Features & Use Cases - Nine Diagram Types: Class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, Gantt charts, and pie/bar charts. - Detailed Syntax References: In-depth guides for relationships, cardinality, activations, alt/loop blocks, subgraphs, themes, and custom styling. - Use Case: When designing a new microservices feature, generate a C4 container diagram showing services and databases, a sequence diagram for the API authentication flow, and an ERD for the new tables—all as version-controlled text rendered automatically in GitHub Markdown. ## Quick Start Ask the AI to create a Mermaid sequence diagram showing how a user login request flows from the frontend through the API to the database.

Frequently Asked Questions about mermaid-diagrams

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

FAQPage Schema
How do I create a sequence diagram in Mermaid?▼

Start with the sequenceDiagram keyword, declare participants, then define messages using arrows like A->>B for requests and B-->>A for responses. Use alt/else blocks for conditional flows, opt for optional steps, and loop for repeated interactions.

How to draw an ER diagram for a database schema?▼

Use the erDiagram keyword, define entities with attributes in curly braces including types and constraints like PK, FK, and UK. Connect entities with cardinality symbols such as ||--o{ for one-to-many relationships.

Does Mermaid render automatically in GitHub Markdown?▼

Yes, GitHub and GitLab natively render Mermaid code blocks in Markdown files. VS Code requires the Markdown Preview Mermaid Support extension, and Notion, Obsidian, and Confluence have built-in support.

What diagram types does Mermaid support?▼

Mermaid supports class diagrams, sequence diagrams, flowcharts, entity relationship diagrams, C4 architecture diagrams, state diagrams, git graphs, Gantt charts, and pie charts. Each type uses a distinct declaration keyword followed by its definition syntax.

Why does my Mermaid diagram fail to render?▼

Rendering fails from syntax errors like misspelled keywords, unsupported special characters such as curly braces in comments, or unknown words in definitions. Validate your syntax incrementally in the Mermaid Live Editor before committing.

How do I export Mermaid diagrams as PNG or SVG?▼

Use the Mermaid Live Editor for interactive export, or install the Mermaid CLI with npm install -g @mermaid-js/mermaid-cli and run mmdc -i input.mmd -o output.png. Docker images are also available for batch exports.

Related Skills

Explore More Software Engineering Skills→
gonzoblascogonzoblasco
1

docs-architect

Generates comprehensive technical documentation and manuals from existing codebases.

Community
Intermediate
abudhahirabudhahir

architecture-documenter

Generate system architecture documentation and Architecture Decision Records.

Community
Advanced
benreceveurbenreceveur

documentation-sync

Detect drift between code and documentation in software repositories.

Community
Intermediate
atanakaatanaka

classdiagram-image-to-json

Convert UML class diagram images into a machine-readable domain-model.json.

Community
Advanced