How do I install the Moai Library Mermaid skill?

Run npx skillmds@latest add rdmptv/moai-library-mermaid-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Moai Library Mermaid skill do?

Enterprise Mermaid diagramming skill for Claude Code using MCP Playwright It is listed under AI & ML on SkillMD.

Is Moai Library Mermaid safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Moai Library Mermaid?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Moai Library Mermaid free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Moai Library Mermaid?

rdmptv (@rdmptv) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Moai Library Mermaid by rdmptv — Agent Skill

Name: Moai Library Mermaid
Author: rdmptv

Quick Reference (30 seconds)

Skill: Mermaid Diagram Expert v6.0.0-skill-edition

Pure skill-based Mermaid rendering for Claude Code with MCP Playwright integration.

Quick Start (2 minutes)

How to Use This Skill in Claude Code

Basic Usage

Skill("moai-library-mermaid")

This skill provides:

Complete Mermaid syntax for all 21 diagram types
MCP Playwright integration for rendering SVG/PNG
Ready-to-use examples and reference documentation
Enterprise diagram patterns and best practices

Supported Diagram Types (21)

Structural Diagrams

Flowchart - Process flows and decision trees
Sequence - Interaction sequences and message flows
Class - Object-oriented class relationships
ER - Entity-relationship databases
Block - Block diagram structures
State - State machines and stateful flows

Timeline & Tracking

Timeline - Chronological events and milestones
Gantt - Project scheduling and timelines
Gitgraph - Git workflow and branching

Architecture & Design

C4 - Context, Container, Component, Code architecture
Architecture - System architecture diagrams
Requirement - Requirements and traceability

Data Visualization

Pie Chart - Pie and donut charts
XY Chart - Scatter and line charts
Sankey - Flow diagrams with proportional width
Radar - Multi-variable comparison charts

User & Process

Mindmap - Hierarchical mind mapping
User Journey - User experience flows
Kanban - Kanban board states
Packet - Network packet structures

Usage in Claude Code

Step 3: Render with MCP Playwright

Once you have your Mermaid code:

# This skill integrates with MCP Playwright
# You can use the playwright MCP server to render the diagram
# The MCP server is configured in .claude/mcp.json

The MCP configuration in .claude/mcp.json enables:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/playwright-mcp"]
    }
  }
}

All 21 Diagram Types Reference

See examples.md for complete working examples of all 21 diagram types.

State Management (State Diagram Example)

Idle → Processing → Complete
  ↓        ↓           ↑
Error ────────────────┘

Learning Resources

Official Site: https://mermaid.js.org
Live Editor: https://mermaid.live
Syntax Guide: https://mermaid.js.org/syntax/
Examples: See examples.md and reference.md in this skill

Support

For Mermaid syntax questions:

Check examples.md for working examples
Review reference.md for official documentation links
Use https://mermaid.live for interactive testing

For Claude Code integration:

Ensure .claude/mcp.json has Playwright configured
Verify Node.js is installed (node --version)
Check Playwright is available (npx @anthropic-ai/playwright-mcp --version)

Version: 6.0.0-skill-edition Last Updated: 2025-11-20 Focus: Pure skill-based Mermaid rendering with MCP Playwright

Implementation Guide

Step 2: Get Mermaid Syntax

The skill provides complete syntax for your diagram type:

Example: Flowchart

flowchart TD
    Start([Start]) --> Input[Input Data]
    Input --> Process{Validation}
    Process -->|Valid| Calculate[Calculate Result]
    Process -->|Invalid| Error[Error Handler]
    Calculate --> Output[Output]
    Error --> Output
    Output --> End([End])

Example: Sequence Diagram

sequenceDiagram
    participant User
    participant API
    participant Database

    User->>API: GET /users
    API->>Database: SELECT * FROM users
    Database-->>API: User records
    API-->>User: JSON response

Example: C4 Architecture

C4Context
    title System Context diagram for Internet Banking System
    Enterprise_Boundary(b0, "Banking System") {
        Person(customer, "Banking Customer", "A customer is a human using the banking system")
        System(banking_system, "Internet Banking System", "Allows customers to check accounts and make payments")
    }
    System_Ext(mail_system, "E-mail System", "The internal Microsoft Exchange e-mail system")
    Rel(customer, banking_system, "Uses", "HTTP/HTTPS")
    Rel(banking_system, mail_system, "Sends e-mail using", "SMTP")
    UpdateElementStyle(customer, $fontColor="white", $bgColor="lightblue", $borderColor="darkblue")
    UpdateElementStyle(banking_system, $fontColor="white", $bgColor="blue", $borderColor="darkblue")
    UpdateElementStyle(mail_system, $fontColor="white", $bgColor="orange", $borderColor="darkorange")

Best Practices

1. Clarity and Readability

Use descriptive labels for all nodes
Keep diagram complexity moderate (20-30 nodes max)
Use consistent styling and color schemes

2. Performance

For complex diagrams, consider breaking into multiple diagrams
Use subgraphs to organize large flowcharts
Limit text length in nodes

3. Accessibility

Provide text alternatives for diagrams
Use color + shape differentiation (not color alone)
Include descriptive titles and legends

4. Organization

Group related diagrams in directories
Use consistent naming conventions
Document diagram purposes in comments

Integration with MoAI-ADK

This skill is designed for use within Claude Code during:

Architecture phase (/moai:1-plan) - Design system diagrams
Documentation phase (/moai:3-sync) - Create visual documentation
Review phase - Communicate system design visually
Onboarding - Help new team members understand architecture

Common Patterns

API Architecture (C4 Example)

System Context
  └─ API Gateway
  └─ Backend Services
  └─ Database
  └─ Cache Layer

Microservices Flow (Sequence Example)

Client → API Gateway → Service A → Database
            → Service B → Cache

Data Pipeline (Flowchart Example)

Extract → Transform → Load → Validate → Report

Advanced Patterns

Step 1: Invoke the Skill

Skill("moai-library-mermaid")

Context7 Integration

Related Libraries & Tools

Mermaid: Diagram and flowchart tool

Official Documentation

Version-Specific Guides

Latest stable version: 10.x

Works Well With

Agents:

workflow-docs - Documentation with diagrams
workflow-spec - SPEC diagrams
design-uiux - Architecture visualization

Skills:

moai-docs-generation - Documentation generation
moai-workflow-docs - Diagram validation
moai-library-nextra - Architecture docs

Commands:

/moai:3-sync - Documentation with diagrams
/moai:1-plan - SPEC with diagrams

Moai Library Mermaid

File contents