skills.rest
yekinya
yekinyaCOMMUNITY
Explore all skills by this author →
GitHub

moai-library-mermaid

Generate Mermaid diagrams across 21 types with MCP Playwright rendering.

2|Updated May 27, 2026
Search Tags:#documentation#mermaid#flowchart#visualization#sequence diagram#diagram#c4
One-click install
npx skills add https://github.com/yekinya/moai-novel --skill moai-library-mermaid-yekinya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-library-mermaid
Source: https://github.com/yekinya/moai-novel/tree/main/moai-novel/.claude/skills/moai-library-mermaid
Command: npx skills add https://github.com/yekinya/moai-novel --skill moai-library-mermaid-yekinya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating architecture diagrams, flowcharts, and sequence diagrams manually is slow and produces inconsistent visuals that drift out of sync with code. This Skill provides complete Mermaid 11.12.2 syntax guidance and rendering integration so diagrams can be written as text, versioned in git, and rendered to SVG or PNG. ## Core Features & Use Cases - 21 Diagram Types: Covers flowcharts, sequence, class, ER, state, Gantt, C4, mindmap, Sankey, radar, kanban, packet, and more, organized into five categories. - MCP Playwright Rendering: Renders Mermaid source to SVG and PNG outputs through the Playwright MCP server configured in the project. - Enterprise Patterns: Includes ready-made patterns for microservices C4 diagrams, event-driven architectures, data pipelines, OAuth2 flows, and incident response flows. - Use Case: During a design review, ask for a C4 context diagram of your microservices platform; the Skill produces valid Mermaid syntax with labeled relationships that you can render and embed in documentation. ## Quick Start Ask Claude to create a Mermaid sequence diagram showing an API request flowing through a load balancer, cache, and database with error handling paths.

Frequently Asked Questions about moai-library-mermaid

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

FAQPage Schema
How do I create a Mermaid sequence diagram with error handling?▼

Define participants first, then use alt/else blocks to branch between success and failure paths. Solid arrows represent synchronous calls and dashed arrows represent responses, with activate/deactivate keywords showing participant activity duration.

What diagram types does Mermaid support for architecture documentation?▼

Mermaid supports 21 diagram types including C4 context diagrams, flowcharts, sequence diagrams, class diagrams, ER diagrams, and state machines. C4 diagrams use System_Boundary, Person, and Rel functions to model system context and container relationships.

How do I render Mermaid diagrams to SVG or PNG?▼

Rendering uses the MCP Playwright server configured in the project mcp.json file, or the mermaid-cli tool via npx mmdc with input and output file arguments. Node.js must be installed and Playwright must be available through npx.

Does Mermaid work with GitHub and documentation sites?▼

GitHub renders Mermaid blocks natively in markdown files, and GitLab provides similar support. Documentation frameworks like Nextra and Gatsby integrate Mermaid through plugins, and diagrams can be versioned alongside code in git.

Why does my Mermaid diagram fail to render?▼

Rendering failures usually come from syntax errors such as unclosed subgraph blocks, invalid arrow notation, or unsupported characters in node labels. Validate diagrams in the Mermaid live editor at mermaid.live before committing them.

What are the limitations of large Mermaid diagrams?▼

Diagrams should stay under 20 to 30 nodes for readability and under 100 nodes for flowchart performance. Complex architectures should be decomposed into context, container, and component diagrams rather than one monolithic diagram.

Related Skills

Explore More Software Engineering Skills→
BigdropsBigdrops
1

c4-architecture

Generate C4 model diagrams in Mermaid syntax from source code analysis.

Community
Advanced
mbadali25mbadali25
2

crew-diagrams

Author Mermaid diagrams and render them to PNG, SVG, or Visio files.

Community
Intermediate
VilnaCRM-OrgVilnaCRM-Org
5

structurizr-architecture-sync

Sync Structurizr workspace.dsl with code changes to maintain C4 diagrams.

Official
Intermediate
ribeec20ribeec20

diagrams

Generate technical diagrams in Mermaid, PlantUML, D2, and Graphviz formats.

Community
Advanced