skills.rest
h102-log
h102-logCOMMUNITY
Explore all skills by this author →
GitHub

moai-library-mermaid

Generate and render Mermaid diagrams across 21 diagram types with MCP Playwright.

Updated Jun 18, 2026
Search Tags:#architecture#documentation#mermaid#flowchart#visualization#sequence diagram#diagram
One-click install
npx skills add https://github.com/h102-log/pdfrag --skill moai-library-mermaid-h102-log
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-library-mermaid
Source: https://github.com/h102-log/pdfrag/tree/main/.claude/skills/moai-library-mermaid
Command: npx skills add https://github.com/h102-log/pdfrag --skill moai-library-mermaid-h102-log

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 error-prone, and keeping visual documentation in sync with code requires constant rework. This Skill provides complete Mermaid 11.12.2 syntax guidance and rendering integration so diagrams can be produced directly from text definitions. ## Core Features & Use Cases - 21 Diagram Types: Covers flowcharts, sequence diagrams, class diagrams, ER diagrams, C4 architecture diagrams, Gantt charts, state machines, mindmaps, Sankey diagrams, and more. - MCP Playwright Rendering: Renders Mermaid definitions to SVG and PNG outputs through the MCP Playwright server integration. - Enterprise Patterns & References: Ships with advanced architecture patterns (microservices, event-driven, data pipelines), optimization guidance for caching and SVG minification, and a full syntax reference. - Use Case: During a design review, ask for a C4 context diagram of your microservices platform and receive valid Mermaid syntax plus a rendered SVG ready to embed in documentation. ## Quick Start Ask Claude to create a Mermaid sequence diagram showing an OAuth2 login flow and render it as an SVG file.

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 flowchart in Claude Code?▼

Invoke the skill and describe the process flow you want. It produces valid Mermaid flowchart syntax using node shapes, arrows, and subgraphs, then renders the result to SVG or PNG through the MCP Playwright server.

What diagram types does Mermaid support?▼

This skill covers 21 types including flowchart, sequence, class, state, ER, Gantt, mindmap, timeline, gitgraph, C4, user journey, requirement, pie, quadrant, XY chart, block, kanban, sankey, packet, radar, and architecture diagrams.

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

Rendering uses the MCP Playwright server configured in the project mcp.json file. Node.js must be installed and Playwright available through npx; alternatively the mermaid-cli (mmdc) tool can generate outputs server-side.

Does Mermaid support C4 architecture diagrams?▼

Yes, C4Context diagrams are supported using Person, System, System_Ext, System_Boundary, and Rel functions to model system context, containers, and relationships between components.

Why does my Mermaid diagram render slowly or fail?▼

Large diagrams with over 50 to 100 nodes degrade rendering performance. Break complex diagrams into smaller ones, use subgraphs to organize flowcharts, and apply caching or SVG minification with SVGO as described in the optimization module.

What are the limitations of text-based diagram generation?▼

Mermaid offers limited layout control compared to manual tools like draw.io, and very dense diagrams become unreadable. For pixel-precise visual design or interactive diagrams, a dedicated diagramming application is a better fit.

Related Skills

Explore More Software Engineering Skills→
X-School-AcademyX-School-Academy
19

dev-swarm-stage-tech-specs

Generate implementation-ready technical specifications from architecture designs.

Official
Advanced
microsoftmicrosoft
2.9k

wiki-vitepress

Package wiki Markdown into a VitePress static site with dark theme and Mermaid diagrams.

Official
Advanced
hohai99hohai99

documentation-consistency-keeper

Synchronize project documentation after spec or code changes.

Community
Basic
davistroydavistroy
5

bpmn-to-drawio

Convert BPMN 2.0 XML diagrams into Draw.io .drawio format.

Community
Advanced