Does it require any external tools?

While optional, it can integrate with Mermaid CLI (mmdc) for SVG rendering and ContextDigger for enhanced architectural analysis.

Can it visualize frontend components?

Absolutely, it can map tree structures for UI components like React or Vue, showing parent-child hierarchies.

Where are the generated diagrams saved?

By default, diagrams are saved in the .claude/siftcoder-state/diagrams/ directory within your project.

What diagram formats does this skill support?

This skill primarily generates diagrams in Mermaid.js syntax, which can be rendered into SVG or viewed in compatible IDE extensions and Markdown editors.

Can it map database relationships?

Yes, it can analyze database models to generate Entity Relationship Diagrams (ERDs) showing tables, keys, and relationships.

Diagram Generator

Name: Diagram Generator
Author: ialameh

byialameh

0•

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

Generates visual documentation including Mermaid diagrams, architecture maps, and system data flows from your codebase.

The Diagram Generator skill automates the creation of visual documentation by analyzing source code to produce clear, informative diagrams. It supports a wide range of formats including module dependency graphs, component hierarchies, ERDs, and API maps using Mermaid syntax. This skill is indispensable for developers who need to quickly grasp complex architectures, document system flows, or visualize database relationships without manual drawing, ensuring documentation stays in sync with the actual code.

主な機能

01Architecture and module dependency mapping

02Component hierarchy and state machine maps

03Automated Mermaid diagram source generation

04Database ERD and API endpoint visualization

05Integration with Mermaid CLI for SVG output

060 GitHub stars

ユースケース

01Onboarding developers by visualizing system architecture and dependencies

02Creating up-to-date documentation for complex data flows and state transitions

03Mapping API endpoints and sequence diagrams for backend service interactions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ialameh/sift-coder diagram-generator

For use in Claude.ai and ChatGPT

Download Skill