What levels of the C4 model does this skill support?

This skill supports all four levels of the C4 model: System Context (Level 1), Container (Level 2), Component (Level 3), and Code (Level 4), as well as Dynamic and Deployment diagrams.

Can I customize the visual style of the diagrams?

Yes, the skill includes documentation for styling macros and tags, allowing you to define custom colors, fonts, and legend items for critical or deprecated systems.

Does GitHub render these diagrams automatically?

GitHub does not natively render PlantUML. This skill provides a script to generate PNG images from your .puml source files, which can then be embedded in your README or documentation files.

Do I need to install PlantUML on my local machine?

No, the skill utilizes a Docker-based rendering script (scripts/generate-diagrams.sh), which allows you to generate high-quality diagrams without any local PlantUML or Java dependencies.

C4 Architecture Diagrams

Name: C4 Architecture Diagrams
Author: datum-cloud

bydatum-cloud

•

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

Generates professional C4 model architecture diagrams using PlantUML to document system hierarchies and component relationships.

The C4 Architecture Diagrams skill enables developers to create standardized, hierarchical visual documentation following the C4 model (Context, Containers, Components, and Code). By leveraging the PlantUML C4 library, this skill provides a structured approach to mapping out complex software systems, from high-level stakeholder views down to granular service interactions. It includes built-in support for layout optimization, custom styling, and a Docker-based workflow for generating PNG assets, ensuring that architectural designs remain version-controlled and easily embeddable within GitHub documentation.

主な機能

01Layout control macros for horizontal and vertical diagram flow

02Standardized relationship mapping with directional hints

03Automated PNG generation via Docker-based rendering scripts

042 GitHub stars

05Full support for C4 Model levels 1 through 4

06Pre-configured PlantUML macros for systems, containers, and components

ユースケース

01Visualizing microservices architecture and external system dependencies

02Creating high-level system context diagrams for technical and non-technical stakeholders

03Documenting internal component relationships within a specific application container

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add datum-cloud/claude-code-plugins c4-diagrams

For use in Claude.ai and ChatGPT

主な機能

01Layout control macros for horizontal and vertical diagram flow

02Standardized relationship mapping with directional hints

03Automated PNG generation via Docker-based rendering scripts

042 GitHub stars

05Full support for C4 Model levels 1 through 4

06Pre-configured PlantUML macros for systems, containers, and components

ユースケース

01Visualizing microservices architecture and external system dependencies

02Creating high-level system context diagrams for technical and non-technical stakeholders

03Documenting internal component relationships within a specific application container

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add datum-cloud/claude-code-plugins c4-diagrams

For use in Claude.ai and ChatGPT