Does this skill require any external dependencies?

Yes, it requires the MCP Playwright server configured in your project's mcp.json and Node.js installed on your system to render diagrams into SVG or PNG formats.

What version of Mermaid is supported?

The skill currently supports Mermaid 11.12.2, providing access to the latest syntax and visualization features available in the Mermaid ecosystem.

What diagram types does the moai-library-mermaid skill support?

The skill supports 21 diagram types including Flowcharts, Sequence, Class, ER, C4 Context, Gantt, Gitgraph, Mindmaps, and more.

How does it integrate with MoAI-ADK?

It is designed to work seamlessly with the moai:1-plan command for creating visual specs and the moai:3-sync command for generating visual documentation.

Can I use this skill for C4 architecture diagrams?

Absolutely. It includes dedicated support for C4 Context, Container, and Component diagrams to visualize enterprise system architecture.

Mermaid Diagram Expert for Claude Code

Name: Mermaid Diagram Expert for Claude Code
Author: modu-ai

bymodu-ai

•

Learning & Documentation

Generates and renders 21 types of Mermaid diagrams for architectural documentation and system visualization using MCP Playwright.

The moai-library-mermaid skill empowers developers to create professional, enterprise-grade visual documentation directly within the Claude Code environment. By leveraging the latest Mermaid 11.12.2 syntax and MCP Playwright integration, it supports everything from simple flowcharts to complex C4 architecture diagrams, Gantt charts, and entity-relationship models. This skill is ideal for technical planning, documenting complex codebases, and communicating system interactions during critical development phases like architectural reviews, spec creation, and team onboarding.

Key Features

01Integrated MCP Playwright rendering for high-quality SVG and PNG outputs

02Support for 21 diagram types including C4, sequence diagrams, and ERDs

03Deep integration with MoAI-ADK for automated documentation workflows

0416 GitHub stars

05Extensive library of templates for rapid system visualization

06Enterprise-grade architectural patterns and diagramming best practices

Use Cases

01Generating automated visual documentation and flowcharts during code synchronization

02Visualizing system architecture and microservices flows during the technical planning phase

03Creating project timelines, Gantt charts, and mindmaps for project management

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add modu-ai/cc-plugins moai-library-mermaid

For use in Claude.ai and ChatGPT

Download Skill