skills.rest
windysky
windyskyCOMMUNITY
Explore all skills by this author →
GitHub

moai-library-mermaid

Render Mermaid diagrams to SVG and PNG via MCP Playwright.

Updated Jan 12, 2026
Search Tags:#architecture#mermaid#rendering#Claude Code#diagrams#diagram#MCP Playwright
One-click install
npx skills add https://github.com/windysky/claude_notification_wsl2 --skill moai-library-mermaid-windysky
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-library-mermaid
Source: https://github.com/windysky/claude_notification_wsl2/tree/main/.claude/skills/moai-library-mermaid
Command: npx skills add https://github.com/windysky/claude_notification_wsl2 --skill moai-library-mermaid-windysky

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill renders Mermaid diagrams for Claude Code using MCP Playwright to generate SVG and PNG outputs, simplifying the creation of architecture diagrams, flowcharts, and sequence diagrams from code or markdown sources.

Core Features & Use Cases

  • Diagram Rendering: Pure Mermaid rendering with MCP Playwright integration to produce high-quality SVG/PNG diagrams.
  • Templates & Examples: Includes ready-to-use diagram templates and enterprise pattern references for rapid documentation.
  • Use Case: Visualize system architecture, data flows, and process sequences directly from Claude Code outputs.

Quick Start

Use the moai-library-mermaid skill to render diagrams directly from code or Markdown inputs via the standard invocation pattern.

Frequently Asked Questions about moai-library-mermaid

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

FAQPage Schema
How do I render Mermaid diagrams in Claude Code?▼

To render Mermaid diagrams in Claude Code, you use this Skill with MCP Playwright tooling to generate SVG and PNG outputs from code or markdown inputs. It simplifies creating architecture, sequence, and flowchart diagrams.

Can I generate PNG and SVG files from Mermaid syntax without manual browser exporting?▼

Yes, you can generate PNG and SVG files directly from Mermaid syntax. The Skill integrates MCP Playwright tooling to automate rendering, producing high-quality visual outputs for your documentation without manual browser exports.

Do I need MCP Playwright to render architecture and sequence diagrams?▼

Yes, MCP Playwright tooling is required to render architecture and sequence diagrams. You also need a standard Node.js environment configured according to the included implementation notes and manifest version 7.1.0.

Does Claude Code support enterprise pattern templates for flowcharts?▼

Yes, Claude Code supports enterprise pattern templates for flowcharts through this Skill. It includes ready-to-use diagram templates and enterprise pattern references for rapidly documenting system architecture and data flows.

What is the best way to visualize system architecture from markdown sources?▼

The best way to visualize system architecture from markdown sources is using this Skill's MCP Playwright integration. It translates code or markdown inputs directly into visual SVG and PNG architecture diagrams.

Related Skills

Explore More Software Engineering Skills→
Wike-CHIWike-CHI
2

playwright

Automate browser tasks with Playwright MCP for navigation, form filling, and data extraction.

Community
Intermediate
SayBGMSayBGM

moai-library-mermaid

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

Community
Advanced
dhar174dhar174
1

mermaid-diagrams

Generate flowcharts, sequence, class, ER, and Gantt diagrams from Mermaid syntax.

Community
Intermediate
thkim2015thkim2015

moai-library-mermaid

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

Community
Advanced