连接

Architecture Diagrams

ai-enhanced-engineerbyai-enhanced-engineer
0•
学习与文档

Generates visual representations of system architecture, service flows, and decision matrices using Mermaid and ASCII formats.

This skill empowers Claude to translate complex architectural concepts into clear, standardized visualizations including Mermaid flowcharts, sequence diagrams, and C4 models. By providing structured patterns and syntax for everything from quick inline ASCII sketches to deep system boundary diagrams, it helps developers document technical decisions, map service dependencies, and communicate system design effectively during the development lifecycle.

主要功能

01Enforces best practices for data flow labeling and logical grouping
02Creates decision matrices to compare technical implementation options
03Supports Mermaid syntax for flowcharts, sequence diagrams, and C4 models
04Generates lightweight ASCII boxes for quick inline sketches
050 GitHub stars
06Provides C4 Context and Container patterns for multi-level system mapping

使用场景

01Comparing different architectural approaches using decision matrices during design reviews
02Visualizing system boundaries and internal container architectures for technical documentation
03Documenting microservice dependencies and request/response timings
Error in user YAML: (<unknown>): mapping values are not allowed in this context at line 2 column 213
---
name: arch-diagrams
description: Architecture visualization patterns using Mermaid and ASCII diagrams. Use for service flows, sequence diagrams, C4 models, decision matrices, or expressing architectural ideas visually. Trigger terms: diagram, flowchart, sequence diagram, architecture visualization, C4 model.
allowed-tools: Read, Grep, Glob
---

Architecture Diagrams

Patterns for expressing architectural ideas visually.

Diagram Selection

Need to Show Use Tool
Service dependencies Flowchart Mermaid
Request/response timing Sequence Mermaid
System boundaries C4 Context Mermaid
Internal architecture C4 Container Mermaid
Quick inline sketch ASCII Box Text
Option comparison Decision Matrix Table

Quick Syntax Reference

Mermaid Flowchart: flowchart TD → A[Node] --> B[Node]

Mermaid Sequence: sequenceDiagram → A->>B: Message

C4 Model: C4Context or C4Container → Person(), System(), Container()

ASCII Box: ┌───┐ │ │ └───┘ with ───▶ arrows

Best Practices

  1. Start simple - ASCII first, Mermaid if complexity warrants
  2. Label everything - Unlabeled arrows are ambiguous
  3. Show data flow - Arrows indicate who initiates
  4. Group related - Use subgraphs for logical boundaries

See reference.md for complete syntax, examples, and advanced patterns.