common-architecture-diagramming

Standardize architecture diagrams using C4 and UML models with Mermaid syntax.

Updated Jun 25, 2026

Search Tags:#system design #diagramming #UML #C4 Model #architecture diagramming

Ready to run

npx skills add https://github.com/VSF-QC-TTS/vf-qc-copilot --skill common-architecture-diagramming-vsf-qc-tts

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: common-architecture-diagramming
Source: https://github.com/VSF-QC-TTS/vf-qc-copilot/tree/main/.agents/skills/common/common-architecture-diagramming
Command: npx skills add https://github.com/VSF-QC-TTS/vf-qc-copilot --skill common-architecture-diagramming-vsf-qc-tts

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a standardized approach to creating clear, audience-appropriate architecture diagrams, ensuring consistency and clarity across your documentation.

Core Features & Use Cases

C4 Model Guidelines: Follows the C4 Model for system architecture diagrams.
UML Diagramming: Offers guidance on creating UML diagrams for various use cases.
Mermaid Syntax: Supports Mermaid syntax for creating diagrams in Markdown.
Use Case: When updating the ARCHITECTURE.md file or creating diagrams for system context, container views, or sequence diagrams.

Quick Start

Use the common-architecture-diagramming skill to generate a C4 Context diagram for your system.

Frequently Asked Questions about common-architecture-diagramming

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

FAQPage Schema

How do I create a C4 context diagram for my system?▼

To create a C4 context diagram, use the common-architecture-diagramming Skill to generate standardized architecture diagrams following the C4 Model guidelines. It supports system context diagrams, container views, and UML sequence diagrams using Mermaid syntax in Markdown.

What is the best way to standardize architecture diagramming for documentation?▼

The best way to standardize architecture diagramming is by applying the C4 Model and UML principles to ensure consistency and clarity. This approach supports updating ARCHITECTURE.md files with audience-appropriate system context and container views.

Can I use Mermaid syntax for UML diagrams in Markdown files?▼

Yes, you can use Mermaid syntax to create UML diagrams directly in Markdown files. The common-architecture-diagramming Skill supports Mermaid syntax for generating sequence diagrams and other architecture visualizations.

Do I need prior knowledge of the C4 Model to generate system context diagrams?▼

Yes, prior knowledge of the C4 Model and UML diagramming principles is required to effectively generate system context diagrams. The Skill standardizes the creation process but relies on your understanding of these architectural frameworks.

How do I update my ARCHITECTURE.md file with standardized container views?▼

To update your ARCHITECTURE.md file with container views, use the common-architecture-diagramming Skill which follows C4 Model guidelines. It provides standardized approaches for creating container views and other architecture diagrams using Mermaid syntax.

What are the limitations of using UML for architecture diagramming?▼

UML architecture diagramming requires knowledge of UML principles and works best for detailed technical diagrams. For higher-level system context and audience-appropriate overviews, the C4 Model provides better abstraction layers than standard UML diagrams.

Pixel-Process-UG