architecture-diagram

仓库创建 2026年1月29日最近提交 14 小时前SkillHot 收录 20 天前

▸ 精选理由

直接输出可渲染的Mermaid图，快速把架构想法可视化。

这个 Skill 做什么

根据文字描述生成可渲染的 Mermaid 系统架构图与分组视图。

把系统或服务的文字描述生成可渲染的 Mermaid 架构图，包含客户端、服务、数据存储、协议连接和分组子图，图可直接导出为 PNG/SVG。适合想要可视化组件如何协同、查看数据流或展示依赖关系时使用。额外会输出组件图例和备注，不只是方框堆砌，便于沟通与工程实现。

▸ 展开 SKILL.md 英文原文

Diagram a system or technical architecture — services, data stores, and how they connect. Use when asked to draw an architecture, show how components fit together, map a system/data flow, or visualize services and dependencies. Produces a ready-to-render Mermaid diagram with grouped subgraphs (renders live, exportable as PNG/SVG) plus a component legend and notes.

开发编程架构图mermaid系统可视化通用

1.2k

Stars

220

Forks

仓库内 Skill

+74

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/mohitagw15856/pm-claude-skills/main/skills/architecture-diagram/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/mohitagw15856/pm-claude-skills/main/skills/architecture-diagram/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# Architecture Diagram Skill

"How does the system fit together?" is best answered with a picture. This skill turns a described system
into a clean **Mermaid architecture diagram** — clients, services, data stores, and third parties, grouped
into logical layers with labelled connections (sync vs async, protocols) — not an undifferentiated blob of
boxes.

## Required Inputs

Ask for these only if they aren't already provided:

- **The components** — services, apps, databases, queues, external APIs.
- **How they connect** — who calls whom; sync (HTTP/gRPC) vs async (queue/event); data flow direction.
- **Logical groupings** — frontend / backend / data / third-party, or by team/domain.
- **Focu

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有