architecture-diagrams

Architecture-diagrams helps create clear, maintainable system architecture diagrams using code-based diagramming tools including Mermaid, PlantUML, the C4 model, flowcharts, and sequence diagrams. It solves the problem of documenting architecture, system design, data flows, and technical workflows in text-based, version-controllable formats rather than as opaque binary images, so diagrams stay in sync with code and can be reviewed like any other source.

The skill provides a quick-start Mermaid example showing a layered architecture with client, API gateway, service, and data layers, plus a set of detailed reference guides in the references/ directory covering a system architecture diagram, sequence diagram, C4 context diagram, component diagrams, deployment diagrams, data flow diagram, and class diagram. It applies to use cases such as system architecture documentation, C4 model diagrams, data flow diagrams, sequence diagrams, component relationships, deployment diagrams, infrastructure and microservices architecture, visual database schemas, and integration patterns. The skill also codifies best practices: use consistent notation and legends, keep each diagram focused on one aspect, use meaningful color coding, group with subgraphs, show data-flow direction clearly, version-control diagrams, and prefer text-based formats; and it lists anti-patterns to avoid such as overcrowding diagrams, mixing abstraction levels, skipping legends, and creating binary image files only.

The skill targets engineers, architects, and technical writers who need to produce and maintain architecture documentation. It centers on open, text-based tooling so diagrams can be diffed and kept current alongside the codebase. Detailed implementations live in the referenced guides, which the user reads for full examples beyond the minimal quick-start snippet.