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.

About

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

Integrated MCP Playwright rendering for high-quality SVG and PNG outputs
Support for 21 diagram types including C4, sequence diagrams, and ERDs
Deep integration with MoAI-ADK for automated documentation workflows
16 GitHub stars
Extensive library of templates for rapid system visualization
Enterprise-grade architectural patterns and diagramming best practices

Use Cases

Generating automated visual documentation and flowcharts during code synchronization
Visualizing system architecture and microservices flows during the technical planning phase
Creating project timelines, Gantt charts, and mindmaps for project management

About

Key Features

Integrated MCP Playwright rendering for high-quality SVG and PNG outputs
Support for 21 diagram types including C4, sequence diagrams, and ERDs
Deep integration with MoAI-ADK for automated documentation workflows
16 GitHub stars
Extensive library of templates for rapid system visualization
Enterprise-grade architectural patterns and diagramming best practices

Use Cases

Generating automated visual documentation and flowcharts during code synchronization
Visualizing system architecture and microservices flows during the technical planning phase
Creating project timelines, Gantt charts, and mindmaps for project management