make-arch-diag

Generate component, data flow, and sequence diagrams in mermaid syntax.

1|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/Trecek/useful-claude-skills --skill make-arch-diag-trecek
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: make-arch-diag
Source: https://github.com/Trecek/useful-claude-skills/tree/main/.claude/skills/make-arch-diag
Command: npx skills add https://github.com/Trecek/useful-claude-skills --skill make-arch-diag-trecek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of architecture diagrams for a selected component or system, reducing time spent on documentation and ensuring consistent visuals across teams.

Core Features & Use Cases

  • Prompt for the component or system to diagram and generate multiple views (component structure, data flow, sequence) using mermaid syntax.
  • Save diagrams to temp/make-arch-diag/{component-name}/ for organized archival and collaboration.
  • Enforce a consistent color palette and labeling scheme across all diagrams to improve readability and maintenance.

Quick Start

Tell me which component or system you want diagrammed, and I will generate mermaid diagrams.

Frequently Asked Questions about make-arch-diag

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

FAQPage Schema
How do I auto-generate architecture diagrams from code?

Architecture diagrams are generated for a specified component or system using mermaid syntax. The process produces multiple views, including component structure, data flow, and sequence diagrams, and saves them to a designated directory for organized archival.

What is the best way to create mermaid diagrams for system documentation?

Creating mermaid diagrams for system documentation is best handled by an automated tool that enforces a consistent color palette and labeling scheme. This improves readability and maintenance while reducing manual documentation time.

How do I document component data flow and sequence views together?

Documenting component data flow and sequence views together involves prompting the diagramming tool with your target system area. It generates all three views simultaneously and saves them to a dedicated temp directory for future reference and collaboration.

Do I need any specific diagramming software to generate these mermaid diagrams?

No external diagramming software is required to generate these mermaid diagrams. The tool operates independently without dependencies, producing the mermaid syntax directly and saving the files to your local environment.

Can I use this for onboarding and architecture reviews?

Yes, this is applicable for onboarding and architecture reviews. The generated diagrams provide consistent visual representations of component structures and data flows, making it easier for new team members to understand systems and facilitating thorough reviews.

Where are the generated architecture diagrams saved?

Generated architecture diagrams are saved to the temp/make-arch-diag/{component-name}/ directory. This organized archival structure ensures that all component views, including data flow and sequence diagrams, are stored together for future reference.