Architecture Diagrams

Generate System Context, Component, Deployment, Data Flow, and Sequence diagrams using Mermaid syntax.

Updated Mar 11, 2026
One-click install
npx skills add https://github.com/yzlin/supa-opencode --skill architecture-diagrams-yzlin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Architecture Diagrams
Source: https://github.com/yzlin/supa-opencode/tree/main/skills/architecture-diagrams
Command: npx skills add https://github.com/yzlin/supa-opencode --skill architecture-diagrams-yzlin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the need for clear, comprehensive architectural documentation by generating various types of diagrams essential for understanding and communicating system design.

Core Features & Use Cases

  • Automated Diagram Generation: Creates System Context, Component, Deployment, Data Flow, and Sequence diagrams using Mermaid syntax.
  • Comprehensive Visualization: Supports additional diagrams like ERDs, State diagrams, and Security architecture diagrams as needed.
  • Use Case: When designing a new microservices-based application, use this Skill to generate a System Context diagram showing interactions with external APIs and a Component diagram detailing each microservice's responsibilities and dependencies.

Quick Start

Generate a system context diagram and a component diagram for the proposed e-commerce platform.

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 syntax?

You can generate system architecture diagrams using Mermaid syntax by providing your system design details to produce System Context, Component, Deployment, and Sequence diagrams. This automates architectural visualization and documentation for both new and existing systems.

What types of system design diagrams are supported for architectural documentation?

System design diagrams supported for architectural documentation include System Context, Component, Deployment, Data Flow, and Sequence diagrams. Additional visualizations like ERDs, State diagrams, and Security architecture diagrams are also generated based on project scope requirements.

Can I use the C4 model to visualize microservices architecture?

Yes, you can use the C4 model to visualize microservices architecture by generating hierarchical Component and System Context diagrams. This approach details each microservice's responsibilities and dependencies while mapping interactions with external APIs.

What is the best way to document data flow and deployment for a new application?

The best way to document data flow and deployment for a new application is generating automated Data Flow and Deployment diagrams using Mermaid syntax. This visualizes information movement across components and maps infrastructure allocation for architectural assessment.

How do I create sequence diagrams for existing systems?

To create sequence diagrams for existing systems, you provide the interaction logic of your components to generate Mermaid syntax visualizations. This documents the chronological messaging between system parts to facilitate architectural assessment and communication.