skills.rest
royhenengel
royhenengelCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagrams

Generate system architecture diagrams, C4 models, flowcharts, and sequence diagrams using Mermaid and PlantUML.

Updated Dec 22, 2025
Search Tags:#architecture#documentation#mermaid#visualization#diagrams#plantuml
One-click install
npx skills add https://github.com/royhenengel/Claude-Customizations --skill architecture-diagrams-royhenengel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagrams
Source: https://github.com/royhenengel/Claude-Customizations/tree/main/skills/Documentation/diagrams-builder/references/architecture-diagrams
Command: npx skills add https://github.com/royhenengel/Claude-Customizations --skill architecture-diagrams-royhenengel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the creation and maintenance of complex system architecture diagrams by leveraging code-based diagramming tools, ensuring consistency and version control.

Core Features & Use Cases

  • Code-based Diagramming: Generate diagrams using Mermaid and PlantUML syntax.
  • Multiple Diagram Types: Supports system architecture, C4 models, sequence diagrams, component diagrams, deployment diagrams, and data flow diagrams.
  • Use Case: Documenting the architecture of a new microservices-based application, visualizing data flow between services, or creating a C4 context diagram for stakeholders.

Quick Start

Generate a Mermaid system architecture diagram for a typical web application.

Frequently Asked Questions about architecture-diagrams

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

FAQPage Schema
How do I generate system architecture diagrams using Mermaid and PlantUML?▼

You generate system architecture diagrams using Mermaid and PlantUML by writing code-based syntax that defines components and relationships. This approach renders visual diagrams for system design while maintaining version control and consistency.

What is the best way to document microservices data flows and technical workflows?▼

The best way to document microservices data flows is using code-based diagramming tools. This generates maintainable sequence diagrams and data flow visualizations that track technical workflows and integrate directly into documentation.

Can I create C4 context diagrams for stakeholders with code-based diagramming?▼

Yes, you can create C4 context diagrams for stakeholders using code-based diagramming. This supports generating C4 models that visualize system architecture and context, making technical design accessible for stakeholder review.

What diagram types are supported for visualizing system design and technical workflows?▼

Supported diagram types for visualizing system design include system architecture, C4 models, sequence diagrams, component diagrams, deployment diagrams, and data flow diagrams, all generated through code-based syntax.

Does code-based diagramming work for maintaining version control of architecture documentation?▼

Yes, code-based diagramming works for maintaining version control of architecture documentation. By defining diagrams using Mermaid and PlantUML syntax, system design changes are tracked as code, ensuring consistency and maintainability.

Related Skills

Explore More Software Engineering Skills→
SSiertsemaSSiertsema

context-diagramming

Create Mermaid-compatible system context diagrams with labeled data flows.

Community
Intermediate
TacuchiTacuchi

diagrams

Generate architecture diagrams from system models using C4, Structurizr DSL, Mermaid, and PlantUML.

Community
Advanced
nimadorostkarnimadorostkar
25

diagrams

Generate Mermaid diagrams as code for version-controlled documentation.

Community
Intermediate
2good4me2good4me

mermaid-diagrams

Generate software diagrams from text using Mermaid's syntax.

Community
Intermediate