architecture-diagrams

@aj-geddes · 收录于 5 天前 · 上游提交 4 个月前

Create system architecture diagrams using Mermaid, PlantUML, C4 model, flowcharts, and sequence diagrams. Use when documenting architecture, system design, data flows, or technical workflows.

场景架构文档技术方案评审架构设计

适合你，如果需要用图表清晰表达系统架构或数据流

/ 下载安装

https://github.com/aj-geddes/useful-ai-prompts/tree/main/skills/architecture-diagrams ↗

/ 通过 npx 安装 校验哈希

npx oh-my-skill add aj-geddes/useful-ai-prompts/architecture-diagrams

/ 通过 bash 安装

curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- aj-geddes/useful-ai-prompts/architecture-diagrams

/ 已经装过?验证本机副本,不用重装

npx oh-my-skill verify aj-geddes/useful-ai-prompts/architecture-diagrams

安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。

300GitHub stars

~555最小装载

~2.2K含声明引用

~2.3K文本包总量

索引托管

怎么用

商店整理自技能原文 · 版本 3f5182c · 表述以原文为准

它做什么

当你要求画架构图时，Claude 会使用 Mermaid、PlantUML 等工具直接生成文本代码形式的图表，如系统架构图、C4 模型图、序列图、数据流图等，而不是输出图片。

什么时候触发

当你想描述系统架构、设计数据流、绘制技术工作流，或者要求生成架构图、序列图等内容时触发。

装好后可以这样说

生成对应的架构图代码。

生成序列图代码。

技能原文 SKILL.md作者撰写 · MIT · 3f5182c

Architecture Diagrams

[Overview](#overview)
[When to Use](#when-to-use)
[Quick Start](#quick-start)
[Reference Guides](#reference-guides)
[Best Practices](#best-practices)

Overview

Create clear, maintainable architecture diagrams using code-based diagramming tools like Mermaid and PlantUML for system design, data flows, and technical documentation.

When to Use

System architecture documentation
C4 model diagrams
Data flow diagrams
Sequence diagrams
Component relationships
Deployment diagrams
Infrastructure architecture
Microservices architecture
Database schemas (visual)
Integration patterns

Quick Start

Minimal working example:

graph TB
    subgraph "Client Layer"
        Web[Web App]
        Mobile[Mobile App]
        CLI[CLI Tool]
    end

    subgraph "API Gateway Layer"
        Gateway[API Gateway<br/>Rate Limiting<br/>Authentication]
    end

    subgraph "Service Layer"
        Auth[Auth Service]
        User[User Service]
        Order[Order Service]
        Payment[Payment Service]
        Notification[Notification Service]
    end

    subgraph "Data Layer"
        UserDB[(User DB<br/>PostgreSQL)]
        OrderDB[(Order DB<br/>PostgreSQL)]
        Cache[(Redis Cache)]
        Queue[Message Queue<br/>RabbitMQ]
    end
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

| Guide | Contents | |---|---| | [System Architecture Diagram](references/system-architecture-diagram.md) | System Architecture Diagram | | [Sequence Diagram](references/sequence-diagram.md) | Sequence Diagram | | [C4 Context Diagram](references/c4-context-diagram.md) | C4 Context Diagram | | [Component Diagram](references/component-diagram.md) | Component Diagram | | [Deployment Diagram](references/deployment-diagram.md) | Deployment Diagram | | [Data Flow Diagram](references/data-flow-diagram.md) | Data Flow Diagram | | [Class Diagram](references/class-diagram.md) | Class Diagram | | [Component Diagram](references/component-diagram-2.md) | Component Diagram | | [Deployment Diagram](references/deployment-diagram-2.md) | Deployment Diagram |

Best Practices

✅ DO

Use consistent notation and symbols
Include legends for complex diagrams
Keep diagrams focused on one aspect
Use color coding meaningfully
Include titles and descriptions
Version control your diagrams
Use text-based formats (Mermaid, PlantUML)
Show data flow direction clearly
Include deployment details
Document diagram conventions
Keep diagrams up-to-date with code
Use subgraphs for logical grouping

❌ DON'T

Overcrowd diagrams with details
Use inconsistent styling
Skip diagram legends
Create binary image files only
Forget to document relationships
Mix abstraction levels in one diagram
Use proprietary formats

按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。

…