GitHub - ray-lee-coder/Visualization-Engineering: Agent-native Visualization Stack — 让 Agent 直接把自然语言、文档、代码库、业务分析转成可编辑、可渲染、可复用的结构化视觉产物。分类收录 Mermaid/draw.io/Excalidraw 引擎，Agent Skills, MCP Servers, 渲染管线, 代码库可视化, 画布 SDK 等 20+ 项目。

What Is This

A curated map of every visualization tool an AI Agent can directly use.

Not "software that helps you draw". Not "libraries for web developers". This repo tracks one thing only — tools and frameworks where an AI Agent (Claude, GPT, Hermes, Cursor, etc.) can output structured visual artifacts directly: Mermaid, .drawio XML, SVG, HTML+SVG, Excalidraw JSON, Vega-Lite JSON.

The bet: Agent-native visualization = structured visual output generation, not "AI operates a drawing app".

Why This Exists

The landscape is moving fast — Mermaid is the standard for docs, draw.io XML is becoming the delivery format for enterprise architecture, MCP servers now let agents control canvas editors in real time. But nobody has mapped the full stack.

This repo fills that gap: 6 layers, 30+ projects, one map.

Architecture at a Glance

%%{init: {'theme': 'base', 'themeVariables': { 'fontSize': '14px', 'primaryColor': '#3a7bd5', 'primaryBorderColor': '#3a7bd5', 'primaryTextColor': '#fff', 'lineColor': '#3a7bd5', 'secondaryColor': '#f0f4ff', 'tertiaryColor': '#24243e'}}}%%
graph TB
    subgraph L6["🏗 端到端方案"]
        E1["Azure 架构审查 Agent"]
        E2["Paper2Any"]
        E3["learn-architecture-drawing"]
    end

    subgraph L5["🔍 代码库可视化"]
        C1["GitDiagram"]
        C2["oh-my-mermaid"]
        C3["drawio-skill Codebase"]
    end

    subgraph L4["🖼 渲染管线层"]
        R1["Kroki · 统一渲染 20+ 格式"]
        R2["draw.io CLI · XML→PNG/SVG"]
    end

    subgraph L3["🔌 MCP Server 层"]
        M1["excalidraw-mcp"]
        M2["drawio-mcp-server"]
        M3["mcp-mermaid"]
        M4["diagram-ai-generator"]
        M5["awsdac · agent-doc"]
    end

    subgraph L2["🤖 Agent Skill 层"]
        S1["drawio-skill ⭐"]
        S2["excalidraw-diagram"]
        S3["diagram-design"]
        S4["fireworks-tech-graph"]
        S5["visual-explainer"]
    end

    subgraph L1["📐 图表 DSL 层"]
        D1["Mermaid"]
        D2["D2"]
        D3["PlantUML"]
        D4["Structurizr"]
        D5["Graphviz"]
    end

    D1 --> S1
    D2 --> S1
    D3 --> S1
    S1 --> M1
    S1 --> M2
    S1 --> R1
    S1 --> R2
    C1 --> S4
    C2 --> S2
    M1 --> E1
    M2 --> E2

Visual Showcase

What does "Agent-native visualization" actually look like? Here are example outputs from tools in this repo:

%%{init: {'theme': 'base', 'themeVariables': { 'fontSize': '13px'}}}%%
flowchart LR
    A["🧑 You: microservices: React + Go + Postgres + Kafka + K8s"]
    A --> B["drawio-skill\n🤖 Agent"]
    B --> C["📄 .drawio XML"]
    C --> D["📦 PNG / SVG / PDF\n交付级架构图"]
    D --> E["✏️ 可编辑\n可继续改"]

    style A fill:#e8f4fd,stroke:#3a7bd5
    style B fill:#f0e6ff,stroke:#7c3aed
    style C fill:#fff3e0,stroke:#ff9800
    style D fill:#e8f5e9,stroke:#4caf50
    style E fill:#fce4ec,stroke:#e91e63

More examples:

Input	Tool	Output
"帮我画一个用户登录流程图"	Mermaid	→ GitHub 原生渲染
"这个 repo 的结构是怎样的"	GitDiagram	→ 交互式架构图
"把这篇分析做成框架图"	diagram-design	→ 自包含截图/导出
"画一个云架构图"	awsdac / diagram-ai	→ 多云架构
"论文转 PPT/海报"	Paper2Any	→ 多格式

Pick Your Scene

你不是从"层"开始的。你是从要干什么开始的。

┌─────────────────────────────────────────────────────────────────────┐
│  你是什么角色 / 要干什么                  → 先看哪个                    │
├─────────────────────────────────────────────────────────────────────┤
│  🔵 非程序员，想用 Agent 直出正式图表文件    → drawio-skill（已装）       │
│  🟢 写 README/文档要插图                   → Mermaid + mcp-mermaid    │
│  🟡 做内容/文章需要配图                     → diagram-design           │
│  🟣 研究 AI Agent / RAG，画技术图           → fireworks-tech-graph     │
│  🔴 经常 fork 开源项目，想快速理解代码结构   → GitDiagram               │
│  ⚪ 用 Obsidian 做知识库，要可视化           → Obsidian Canvas + Excalidraw │
│  🟠 想给团队搭自动出图服务                   → Kroki + drawio-skill     │
│  🔵 以后想做 Agent workflow builder 产品    → React Flow + tldraw      │
└─────────────────────────────────────────────────────────────────────┘

Quick Start

# Route 1: Agent + Mermaid (fastest, for docs)
# Just put this in your markdown:
# ```mermaid
# graph TD; A-->B; B-->C;
# ```

# Route 2: Agent + drawio-skill (recommended, for delivery)
# Load the skill into any Agent framework
# → tell it "draw a microservices architecture"
# → get back .drawio XML → render with draw.io CLI

# Route 3: Agent + MCP Server (for interactive control)
# Install excalidraw-mcp or drawio-mcp-server
# Agent can now manipulate a live canvas in real time

See individual project files in each subdirectory for detailed usage.

Project Catalog

📐 Layer 1: Diagram-as-Code DSL

Agent 最舒服的输出格式 — 文本 → 图

Project	Pitch	Best For
Mermaid ⭐	文档图事实标准，Markdown 里直接写	README、PRD、流程图
D2	比 Mermaid 更现代的 DSL，布局引擎可换	严肃架构图
PlantUML	UML 老大哥，生态最成熟	UML、时序、部署图
Structurizr	C4 model-as-code，一份 DSL 出多张图	企业架构文档
Graphviz 🔥	图布局底层标准，万物之源	依赖图、关系图
mingrammer/diagrams	Python 代码画云架构	AWS/Azure/GCP 架构

🤖 Layer 2: Agent Skills

这个仓库的核心 — 让 Agent 直接产出的能力单元

Project	Engine	Why It Matters
⭐ drawio-skill ✅ 已装	draw.io	自检修复 · 10k+ 形状 · 321 AI 图标 · 代码库→图
excalidraw-diagram-skill	Excalidraw	手绘风 Agent 直出，Playwright 渲染
diagram-design	HTML/SVG	编辑级 · 品牌色匹配 · 14 种类型
fireworks-tech-graph	SVG	8 种视觉风格 · AI 领域模式 (RAG/Agent)
visual-explainer	HTML/Mermaid	7 个命令 · 幻灯片 · Diff Review
architecture-diagram-generator	HTML	深色主题 · 自包含 · Claude 技能
tikz-diagrams-skill	LaTeX	学术论文级，数学/算法图
softaworks/agent-toolkit	合集	40+ 技能包，c4/draw-io/excalidraw/mermaid 都有

🔌 Layer 3: MCP Servers

让 Agent 从"生成文件"进化到"直接操控画布"

Project	Engine	Value Add
excalidraw-mcp（官方）⭐	Excalidraw	流式手绘 · 无需 Key · MCP App
drawio-mcp-server	draw.io	控制编辑器 · 多文档 · Mermaid 兼容
diagram-ai-generator	diagrams	多云架构 · 5 工具 · pip install
maaker-excalidraw-mcp	Excalidraw	25+ 图类型 · CJK · 自动布局
mcp-mermaid	Mermaid	Agent 动态生成+校验
claude-mermaid	Mermaid	Claude Code 实时预览+live reload
awsdac	AWS	YAML→架构图，AWS 官方
ai-diagram-maker-mcp	SaaS	远程 MCP，API Key 接入
AgentDoc	Mermaid C4	代码库→C4 文档

🖼 Layer 4: Rendering Pipeline

DSL 转图片的最后一公里

Project	Pitch
Kroki	统一 API 渲染 20+ 格式，Agent 不用关心具体渲染器
draw.io CLI	.drawio → PNG/SVG/PDF/JPG，支持可编辑嵌入

🔍 Layer 5: Codebase Visualization

理解代码不用读代码

Project	Pitch
GitDiagram	GitHub URL 的 hub → diagram，秒出交互式架构图
oh-my-mermaid	Claude Code 理解代码库 → 结构清晰的架构图
drawio-skill Codebase→图	Python/JS/Go/Rust import 图 + 类继承

📊 Layer 6: Data Visualization

不是流程图，但有图

Project	Pitch
Vega-Lite	JSON 语法定义交互式图表，Agent 输出最稳定

🎨 Layer 7: Canvas / Node Graph SDKs

以后做产品用的

Project	Pitch
React Flow	工作流编辑器/Agent 流程 builder 的 UI 底座
tldraw	无限画布，Make Real 把手绘变 HTML
Obsidian Canvas	知识库可视化落点

🏗 Layer 8: End-to-End

完整的，但是重

Project	Pitch
Azure 架构审查 Agent	输入架构描述 → 风险分析 + Excalidraw 图
Paper2Any	论文 → draw.io 图 / PPT / 海报 / 视频
learn-architecture-drawing	提示词模板 + 多工具 SOP 指南

4 Product Routes

不同场景选不同路线：

%%{init: {'theme': 'base', 'themeVariables': { 'fontSize': '13px'}}}%%
flowchart LR
    subgraph Light["⚡ 轻量路线"]
        direction TB
        M["Mermaid"]
        Doc["文档·README\n技术文档·PRD"]
    end
    subgraph Formal["🏗 正式路线"]
        direction TB
        D["draw.io XML"]
        Ent["企业架构·客户方案\n系统拓扑·UML"]
    end
    subgraph Content["📊 内容路线"]
        direction TB
        S["SVG/HTML"]
        Frame["商业框架·文章配图\n课程图·产品机制"]
    end
    subgraph Product["🎨 产品路线"]
        direction TB
        C["Canvas SDK"]
        WF["Workflow Builder\n知识库可视化"]
    end

    Light --> Formal --> Content --> Product

路线	适合	缺点	代表组合
① Mermaid	README · PRD · 技术文档	复杂布局难控，正式交付感不够	Mermaid + mcp-mermaid
② draw.io XML ⭐	企业架构 · 客户方案 · 系统拓扑	XML 长，需 skill 和校验	drawio-skill + drawio-mcp-server
③ SVG / HTML+SVG	商业框架图 · 文章配图 · 课程图	后续编辑不如 draw.io 方便	diagram-design + visual-explainer
④ Canvas / Node Graph	Obsidian · Excalidraw · React Flow	需要前端承载	excalidraw-mcp + React Flow

State of the Stack

领域	状态	趋势
Mermaid	✅ 文档图标准答案	但不是所有场景的答案
draw.io XML	🚀 正式图表核心格式	drawio-skill + drawio-mcp-server 都在押
Agent Skills 生态	🌱 刚起步	2025-2026 集中爆发，现在入场好时机
MCP 协议	🔥 从"生成文件"到"操控画布"	正在改变 Agent 可视化能力下限
最大空白	🎯 缺端到端 Agent 工作流	文档/代码/业务分析 → 选引擎 → 出图

这个仓库会持续更新。PR welcome。

收录标准：开源 · Agent 可直出 · 结构化视觉产物 · 有维护活性

维护：@ray-lee-coder

Name		Name	Last commit message	Last commit date
01-diagram-as-code		01-diagram-as-code
02-agent-skills		02-agent-skills
03-mcp-servers		03-mcp-servers
04-rendering-pipeline		04-rendering-pipeline
05-codebase-visualization		05-codebase-visualization
06-data-visualization		06-data-visualization
07-canvas-node-graph		07-canvas-node-graph
08-end-to-end		08-end-to-end
assets		assets
.gitignore		.gitignore
README.md		README.md

Navigation Menu

Repository files navigation

What Is This

Why This Exists

Architecture at a Glance

Visual Showcase

Pick Your Scene

Quick Start

Project Catalog

📐 Layer 1: Diagram-as-Code DSL

🤖 Layer 2: Agent Skills

🔌 Layer 3: MCP Servers

🖼 Layer 4: Rendering Pipeline

🔍 Layer 5: Codebase Visualization

📊 Layer 6: Data Visualization

🎨 Layer 7: Canvas / Node Graph SDKs

🏗 Layer 8: End-to-End

4 Product Routes

State of the Stack

About

Releases

Packages

Contributors

Latest commit

History

Folders and files

Repository files navigation

What Is This

Why This Exists

Architecture at a Glance

Visual Showcase

Pick Your Scene

Quick Start

Project Catalog

📐 Layer 1: Diagram-as-Code DSL

🤖 Layer 2: Agent Skills

🔌 Layer 3: MCP Servers

🖼 Layer 4: Rendering Pipeline

🔍 Layer 5: Codebase Visualization

📊 Layer 6: Data Visualization

🎨 Layer 7: Canvas / Node Graph SDKs

🏗 Layer 8: End-to-End

4 Product Routes

State of the Stack

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors