Does this skill require external software?

Yes, it uses the Mermaid CLI (mmdc) via npx to render and validate SVGs. You will need Node.js installed on your system to generate the visual files.

What types of diagrams can it create?

It supports high-level Architecture maps, module-to-module Dependency graphs, logic Flow charts for functions, and Entity-Relationship (ER) diagrams for database schemas.

What happens if the Mermaid syntax is invalid?

The skill includes a built-in validation loop that reads error messages from the renderer and automatically fixes the syntax until a successful SVG is generated.

Can I use these diagrams in my GitHub README?

Absolutely! The skill generates both Mermaid code blocks and validated SVG files which are ready to be embedded in GitHub, Notion, or any Markdown-based documentation.

How does it ensure the diagrams are accurate?

The skill performs a structured analysis of your project's directory, configuration files, and imports to ensure nodes and edges reflect real code relationships rather than assumptions.

Diagram Expert

Name: Diagram Expert
Author: mikegazzaruso

bymikegazzaruso

•

学習とドキュメンテーション

Generates and validates Mermaid architecture, dependency, flow, and entity-relationship diagrams directly from your source code.

Diagram Expert is a specialized Claude Code skill designed to visualize complex codebases by automatically generating accurate Mermaid diagrams. It meticulously analyzes directory structures, tech stacks, and import relationships to create high-level architecture maps, module dependency graphs, function logic flows, and ER diagrams. Unlike basic generators, it includes a mandatory validation loop using the Mermaid CLI to ensure every diagram is syntactically correct and exported as a production-ready SVG file, making it ideal for READMEs, documentation, and pull request reviews.

主な機能

01Automatic codebase analysis for architecture and dependency mapping

02Syntax validation loop to ensure error-free Mermaid output

03Smart abstraction to group files into logical modules and layers

04Support for multiple diagram types: Architecture, Flow, ER, and Dependencies

05Generation of validated SVGs using the Mermaid CLI (mmdc)

061 GitHub stars

ユースケース

01Onboarding new developers by generating high-level system architecture maps

02Visualizing complex database schemas and relationships for better data modeling

03Documenting legacy code logic through automatically generated flow charts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mikegazzaruso/codemap diagram-expert

For use in Claude.ai and ChatGPT

Download Skill