crew-diagrams

Author Mermaid diagrams and render them to PNG, SVG, or Visio files.

2|Updated Jul 28, 2026
One-click install
npx skills add https://github.com/mbadali25/useful-claude-add-ons --skill crew-diagrams-mbadali25
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: crew-diagrams
Source: https://github.com/mbadali25/useful-claude-add-ons/tree/main/plugin/crew/skills/crew-diagrams
Command: npx skills add https://github.com/mbadali25/useful-claude-add-ons --skill crew-diagrams-mbadali25

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mermaid-js/mermaid-cli, and includes scripts (resource) components.

What problem does it solve? Architecture and process diagrams drawn in GUI tools become unreviewable in pull requests and drift out of sync with the code they describe. This Skill keeps diagrams as versioned Mermaid source files with machine-readable provenance headers, so they diff cleanly, stay verifiable against the codebase, and can be re-rendered on demand. ## Core Features & Use Cases - Mermaid diagram authoring: Guidance for choosing the right diagram type (flowchart, sequence, ER, state, gantt) and rules that keep diagrams readable, such as labeled edges and one-idea-per-diagram limits. - Batch rendering: The render.sh script converts every .mmd file in a directory to PNG and SVG via mermaid-cli, skipping unchanged sources and handling headless Chromium sandbox issues in CI. - Visio export: The visio.ps1 script detects an installed Visio licence and builds a .vsdx file from a JSON node/edge description via COM automation, with honest fallbacks (SVG import, draw.io) when Visio is absent. - Use Case: After refactoring a service, regenerate the architecture diagram by updating the .mmd source, running the render script, and committing both in the same pull request. ## Quick Start Ask the assistant to draw an architecture diagram of the current service as Mermaid and render it to PNG and SVG in docs/diagrams.

Frequently Asked Questions about crew-diagrams

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

FAQPage Schema
How do I render Mermaid diagrams to PNG or SVG from the command line?

Install mermaid-cli globally with npm to get the mmdc command, then run the render.sh script against a directory of .mmd files. It renders each source to both PNG and SVG in an out/ subdirectory, skipping files whose source has not changed.

How do I create a Visio file from a diagram without drawing it manually?

The visio.ps1 script builds a .vsdx file from a JSON description of nodes and edges using Visio COM automation on Windows. It produces real shapes and connectors on a grid layout that a person then arranges and restyles.

Can I export Mermaid diagrams to Visio if Visio is not installed?

Yes. Render the diagram to SVG and import it into Visio, or use draw.io (diagrams.net), which imports Mermaid directly and exports .vsdx files. The skill recommends asking which option fits rather than faking Visio output.

Why does mmdc fail in CI or Git Bash with a missing configuration file error?

Headless Chromium needs the --no-sandbox flag in containers and CI, passed via a puppeteer config file. On Git Bash with MSYS_NO_PATHCONV=1, the POSIX temp path is not converted for the Windows mmdc binary; render.sh fixes this using cygpath when available.

When should I not create a diagram for a system?

Skip diagrams for anything the code answers faster, such as a three-file service. Reserve diagrams for genuinely hard-to-hold structures: cross-service call paths, retry and failure behavior, data lineage, and processes with non-obvious approval rules.