Mermaid Diagram

by wecode-ai

Mermaid Diagram is a Writing skill for Claude Code, published by wecode-ai in Wegent.

712 stars125 forkson wecode-ai/WegentAdded 2026/08/23Repository updated 2026/08/23

View source on GitHub Download repo ZIP

agentaichatbotclaude-codecodexllmwework

Install in seconds

Install Mermaid Diagram

Copy Mermaid Diagram into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/wecode-ai/Wegent/tree/main/backend/init_data/skills/mermaid-diagram ~/.claude/skills/mermaid-diagram

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/wecode-ai/Wegent.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: backend/init_data/skills/mermaid-diagram/SKILL.md in wecode-ai/Wegent
Installs to: ~/.claude/skills/mermaid-diagram
Collection: One of 18 skills cataloged from this repository
Category: Writing — 1012 skills

What Mermaid Diagram does

Mermaid Diagram validates Mermaid syntax before outputting code blocks. Use it to create flowcharts, sequence diagrams, ER diagrams, Gantt charts, and other Mermaid-based visuals.

Mermaid Diagram is cataloged under Writing on DirSkills. Mermaid Diagram comes from a repository tagged agent, ai, chatbot, claude-code and codex.

Documentation

README

Excerpt

Diagram Visualization with Mermaid

When you need to visualize concepts, workflows, architectures, or relationships, use Mermaid diagram syntax.

IMPORTANT: Two-Step Workflow

To create mermaid diagrams, follow this two-step workflow:

Step 1: Validate with render_mermaid tool - Use the tool to validate your mermaid syntax
Step 2: Output mermaid code block - After successful validation, output the mermaid code block in your response

This ensures:

Syntax is validated before displaying to the user
The diagram is automatically saved in the conversation history
The diagram can be referenced later in the conversation

Step 1: Use render_mermaid Tool

Call the render_mermaid tool with the following parameters:

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Mermaid Diagram

What else does wecode-ai publish alongside Mermaid Diagram?
Mermaid Diagram is one of 18 skills that DirSkills catalogs from wecode-ai/Wegent, the repository it ships in. Its siblings there include Browser Control, Conversation To Prompt and Create Smart App. Each one is a separate skill with its own page in this directory, installs the same way Mermaid Diagram does, and is maintained by wecode-ai in that same repository. The rest of the collection is listed on the wecode-ai/Wegent page.
How does Mermaid Diagram compare to other Writing skills?
Mermaid Diagram ranks #598 by stars among the 1012 Writing skills in this catalog. The most-starred ones next to it are Article Writing, Social Media Content Calendar and Knowledge Comic Creator. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Mermaid Diagram against them. Open each page to compare what they document and how they install.