moai-library-mermaid

Generate flowcharts, sequence diagrams, and architecture diagrams using Mermaid syntax.

Updated Mar 11, 2026
One-click install
npx skills add https://github.com/thkim2015/pdf-tool --skill moai-library-mermaid-thkim2015
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: moai-library-mermaid
Source: https://github.com/thkim2015/pdf-tool/tree/main/.claude/skills/moai-library-mermaid
Command: npx skills add https://github.com/thkim2015/pdf-tool --skill moai-library-mermaid-thkim2015

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill enables the creation of various diagrams (flowcharts, sequence diagrams, architecture diagrams, etc.) directly from text descriptions, streamlining documentation and visualization processes.

Core Features & Use Cases

  • Diagram Generation: Supports 21 types of diagrams including flowcharts, sequence, class, state, ER, Gantt, mindmaps, timelines, Git graphs, C4, user journeys, requirements, pie charts, XY charts, block diagrams, Kanban, Sankey, packet, and radar charts.
  • Enterprise Integration: Integrates with MCP Playwright for rendering SVG and PNG outputs, suitable for enterprise architecture and documentation.
  • Use Case: Generate an architecture diagram for a new microservices platform to visually communicate system components and their interactions to stakeholders.

Quick Start

Create a flowchart diagram illustrating a user login process.

Frequently Asked Questions about moai-library-mermaid

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

FAQPage Schema
How do I generate architecture diagrams from text for software documentation?

You generate architecture diagrams from text by writing Mermaid syntax, which this Skill converts into visual diagrams. It supports enterprise-level rendering to SVG and PNG outputs, streamlining documentation and visualization processes directly from text descriptions.

What types of diagrams can I create using Mermaid syntax?

Using Mermaid syntax, you can create 21 types of diagrams including flowcharts, sequence, class, state, ER, Gantt, mindmaps, timelines, Git graphs, C4, user journeys, requirements, pie charts, XY charts, block diagrams, Kanban, Sankey, packet, and radar charts.

How do I render Mermaid diagrams into SVG or PNG outputs?

To render Mermaid diagrams into SVG or PNG outputs, the Skill integrates with MCP Playwright and requires the mmdc tool. This setup enables enterprise-level diagramming by converting text-based Mermaid syntax into rendered visual files.

Do I need specific tools to use Mermaid for enterprise-level visualization?

Yes, you need the mmdc tool for rendering and MCP Playwright integration to achieve enterprise-level visualization with Mermaid. These dependencies allow you to generate SVG and PNG outputs suitable for enterprise architecture and documentation needs.

What is the best way to visualize a microservices architecture diagram for stakeholders?

The best way to visualize a microservices architecture diagram is using Mermaid to generate an architecture diagram from text descriptions. This visually communicates system components and their interactions to stakeholders, streamlining the documentation process.