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

학습 및 문서화

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.

주요 기능

Architecture and module dependency mapping
Component hierarchy and state machine maps
Automated Mermaid diagram source generation
Database ERD and API endpoint visualization
Integration with Mermaid CLI for SVG output
0 GitHub stars

사용 사례

Onboarding developers by visualizing system architecture and dependencies
Creating up-to-date documentation for complex data flows and state transitions
Mapping API endpoints and sequence diagrams for backend service interactions

소개

주요 기능

Architecture and module dependency mapping
Component hierarchy and state machine maps
Automated Mermaid diagram source generation
Database ERD and API endpoint visualization
Integration with Mermaid CLI for SVG output
0 GitHub stars

사용 사례

Onboarding developers by visualizing system architecture and dependencies
Creating up-to-date documentation for complex data flows and state transitions
Mapping API endpoints and sequence diagrams for backend service interactions