画图项目：Diagrams、D2、omm

概述

之前汇总介绍过好多款绘图工具（其中大部分都简单体验过，部分深度使用）：

• 超强大免费绘图工具draw.io初体验
• Mermaid语法、实战
• 画图工具汇总：Excalidraw、tldraw、Drawnix、Drawio
• 绘图工具汇总：FossFLOW、LogicFlow、oxdraw、LucidChart、iCraft Editor
• 代码画图项目、Skill插件汇总：Next AI Draw.io、Fireworks-Tech-Graph、Architecture Diagram Generator、Excalidraw Diagram
• AI绘图项目：Beautiful-Mermaid、LikeC4、DeepDiagram
• 画布项目：Rnote、Lorien、Infinite-Canvas、open-ai-canvas

这里面既有传统的绘图工具，也有用代码形式绘制图表的工具，还有诞生于AI、LLM时代的绘图工具，还有调教AI智能体来生成意图表达更精确、样式更精美的技能。

个人的认知：用代码形式绘图会是未来发展的趋势，再借助于提示词或技能插件，可极大提高个人工作、团队协作效率。

因为用代码生成图表，可复用、可版本管理、修改成本极低，还能直接放进文档和PPT。

Diagrams

Python生态

适合：云架构图、系统架构图、服务依赖图

特点：用Python写架构，组件库丰富（AWS / GCP / Azure都支持）

优点：图表表达很工程化，适合写技术方案和架构设计文档

适用人群：后端、架构师、云原生开发

Mermaid

适合：流程图、时序图、状态图、类图、甘特图

特点：语法简单，Markdown直接支持（很多文档平台都能渲染）

优点：学习成本低，上手快，写文档必备

适用场景：README、技术博客、团队文档、需求流程梳理

Markmap

适合：思维导图、知识体系整理、课程笔记

特点：Markdown一键生成脑图

优点：写笔记时非常爽，结构清晰，复盘能力拉满

适用场景：学习路线、项目拆解、面试知识点整理

ASCII Editors

字符画流程图

适合：快速画草图、终端环境下画图

特点：用ASCII字符画框架图/流程图

优点：轻量、速度快，不依赖复杂工具

适用场景：临时讨论、技术沟通、写在注释里也能看懂

PlantUML

适合：UML图（类图、时序图、用例图等）

特点：用文本描述UML，生成规范图形

优点：严谨、标准化，适合企业级开发文档

适用人群：Java开发、系统设计、需要输出标准UML的团队

参考UML入门以及Plant UML工具介绍。

Go-Diagrams

适合：网络拓扑、系统架构图、云组件图

特点：用Go语言描述架构图

优点：对Go开发者非常友好，可集成到工程里自动生成

适用场景：Go项目文档、基础设施架构展示

选型

总结：怎么选？

如果你只是写文档、画流程：选Mermaid

如果你要画UML标准图：选PlantUML

如果你做云架构设计：选Diagrams

如果你爱做笔记复盘：选Markmap

如果你想快速画草图：ASCII Editors

如果你是Go开发：Go-Diagrams

个人建议：Mermaid+Markmap基本能覆盖日常80%的需求。学会之后，你会发现写文档效率直接翻倍。

Diagrams

官网、基于Python+TypeScript实现的开源（GitHub，42.7K Star，2.7K Fork）架构图绘制库，无需借助Visio、ProcessOn、Draw.io等图形工具，仅通过代码即可快速生成云服务、微服务、Web服务等架构图。其底层依赖Graphviz渲染图像，将代码逻辑转化为结构化图形，支持AWS、Azure、阿里云、K8s等主流云平台图标。

优缺点分析：

• 优点是代码化绘图、版本可控、集成开发流程，适合程序员快速输出架构图；
• 缺点是复杂自定义图形能力较弱，依赖Graphviz环境实现图像渲染，过度复杂的流程图绘制效率较低。

内置大量云厂商图标，满足不同场景需求：

• AWS：EC2、RDS、S3、Lambda、ELB等
• Azure：虚拟机、SQL数据库、存储等
• 阿里云：ECS、RDS、OSS、SLB等
• Kubernetes：Pod、Service、Ingress、Node等
• 通用组件：Client、Server、DB、Nginx、Docker等

核心概念：

• Diagram：画布，定义图表名称、方向、输出格式等
• Node：节点，代表架构中的组件（服务器、数据库、客户端等）
• Cluster：集群，用于对节点进行分组，形成逻辑区域

基础绘图流程

• 导入Diagram与对应资源模块
• 创建Diagram对象，设置图表信息
• 定义节点，使用>>符号建立节点间调用关系
• 运行代码，自动生成PNG、SVG格式图片

实战

从PyPI下载Python包：pip install diagrams

入门案例

from diagrams import Diagram
from diagrams.aws.compute import EC2
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB

# 定义图表：名称、方向、输出格式
with Diagram("Web 服务架构", show=False, direction="LR"):
	# 定义节点与调用关系
	ELB("负载均衡") >> EC2("Web 服务器") >> RDS("数据库")

解读：

• with Diagram(...)：创建绘图上下文，自动管理资源
• direction="LR"：表示从左到右绘图，也可使用TB（从上到下）
• show=False：表示运行后不自动打开图片，仅保存
• 节点使用对应云服务图标，名称可自定义

代码运行成功后，会在当前目录生成名为web_服务架构.png的架构图，直观展示负载均衡、Web服务器、数据库的调用流程。

当架构中存在多个同类组件时，可使用Cluster进行分组，让图表结构更清晰。

from diagrams import Diagram, Cluster
from diagrams.aws.compute import EC2
from diagrams.aws.database import RDS, ElastiCache
from diagrams.aws.network import ELB
from diagrams.aws.storage import S3

with Diagram("复杂 Web 架构", show=False, direction="LR"):
	# 定义客户端
	client = EC2("用户客户端")

	# 前端服务集群
	with Cluster("前端服务组"):
		lb = ELB("负载均衡")
		servers = [
			EC2("Web 1"),
			EC2("Web 2"),
			EC2("Web 3")
		]

	# 数据服务集群
	with Cluster("数据层"):
		db = RDS("主库")
		cache = ElastiCache("Redis缓存")
		storage = S3("对象存储")

	# 建立调用关系
	client >> lb >> servers
	servers >> db
	servers >> cache
	servers >> storage

解读：

• Cluster可将多个节点包裹，形成独立视觉区域
• 列表形式可批量定义同类节点，简化代码
• 支持一对多、多对一的连接关系，自动生成连线

微服务基础架构

from diagrams import Diagram, Cluster
from diagrams.onprem.client import User
from diagrams.onprem.compute import Server
from diagrams.onprem.database import PostgreSQL
from diagrams.onprem.inmemory import Redis
from diagrams.onprem.network import Nginx
from diagrams.onprem.queue import RabbitMQ
from diagrams.onprem.logging import ELK

with Diagram("微服务架构", show=False, direction="TB"):
	user = User("用户")

	with Cluster("网关层"):
		gateway = Nginx("网关服务")

	with Cluster("业务微服务"):
		user_service = Server("用户服务")
		order_service = Server("订单服务")
		pay_service = Server("支付服务")

	with Cluster("中间件"):
		mq = RabbitMQ("消息队列")
		cache = Redis("缓存")
		db = PostgreSQL("数据库")

	with Cluster("日志监控"):
		elk = ELK("日志系统")

	user >> gateway
	gateway >> [user_service, order_service, pay_service]
	[user_service, order_service, pay_service] >> mq
	[user_service, order_service, pay_service] >> cache
	[user_service, order_service, pay_service] >> db
	[user_service, order_service, pay_service] >> elk

解读：

• 使用onprem系列节点，适用于自建机房、私有部署架构
• 清晰划分网关层、业务服务、中间件、监控系统
• 多服务统一调用中间件，结构一目了然

前后端分离项目

from diagrams import Diagram
from diagrams.onprem.client import User
from diagrams.onprem.compute import Server
from diagrams.onprem.container import Docker
from diagrams.onprem.database import MongoDB
from diagrams.onprem.network import Nginx
from diagrams.programming.language import Python, Javascript
from diagrams.devops import Git, Jenkins

with Diagram("前后端分离架构", show=False):
	user = User("用户")

	frontend = Javascript("前端 Vue/React")
	web = Nginx("Web 服务")
	backend = Python("后端服务")
	db = MongoDB("数据库")

	with Cluster("DevOps 流程"):
		git = Git("代码仓库")
		ci = Jenkins("CI/CD")
		docker = Docker("容器部署")

	user >> frontend >> web >> backend >> db
	git >> ci >> docker >> backend

解读：

• 支持编程语言、DevOps工具、容器等通用节点
• 完整展示从用户访问到开发部署的全流程
• 适合前后端分离项目、前端开发、全栈开发场景

Docker+Kubernetes架构

from diagrams import Diagram, Cluster
from diagrams.onprem.client import User
from diagrams.onprem.container import Docker
from diagrams.k8s.compute import Pod, Deployment
from diagrams.k8s.network import Ingress, Service
from diagrams.k8s.cluster import Node
from diagrams.onprem.monitoring import Prometheus, Grafana

with Diagram("K8s 容器架构", show=False, direction="LR"):
	user = User("用户")

	with Cluster("K8s 集群"):
		ingress = Ingress("入口")
		svc = Service("服务")
		deploy = Deployment("部署")
		pods = [
			Pod("Pod 1"),
			Pod("Pod 2")
		]
		node = Node("工作节点")

	with Cluster("监控系统"):
		prom = Prometheus("监控采集")
		graf = Grafana("可视化")

	docker = Docker("容器")

	user >> ingress >> svc >> deploy >> pods >> node
	pods >> docker
	pods >> prom
	prom >> graf

解读：

• 专门提供Kubernetes全套图标，适配云原生场景
• 展示Ingress、Service、Deployment、Pod层级关系
• 适合运维、云原生、后端开发人员使用

电商平台极简架构

from diagrams import Diagram, Cluster
from diagrams.onprem.client import User
from diagrams.onprem.network import Nginx
from diagrams.onprem.compute import Server
from diagrams.onprem.database import MySQL
from diagrams.onprem.queue import RabbitMQ
from diagrams.onprem.inmemory import Redis
from diagrams.aws.storage import S3
from diagrams.onprem.security import Vault

with Diagram("电商平台架构", show=False):
	users = User("用户")

	with Cluster("接入层"):
		lb = Nginx("负载均衡")

	with Cluster("业务服务"):
		goods = Server("商品服务")
		order = Server("订单服务")
		pay = Server("支付服务")
		user_srv = Server("用户服务")

	with Cluster("数据与中间件"):
		db = MySQL("业务库")
		redis = Redis("缓存")
		mq = RabbitMQ("消息队列")
		oss = S3("图片存储")
		secret = Vault("密钥管理")

	users >> lb >> [goods, order, pay, user_srv]
	[goods, order, pay, user_srv] >> [db, redis, mq, oss, secret]

解读：

• 覆盖电商核心服务：用户、商品、订单、支付
• 包含数据库、缓存、消息队列、对象存储、密钥服务
• 结构简洁，可直接用于项目介绍与架构说明

个人项目/博客系统架构

from diagrams import Diagram
from diagrams.onprem.client import User
from diagrams.onprem.network import Nginx
from diagrams.programming.language import Python
from diagrams.onprem.database import SQLite
from diagrams.onprem.hosting import Server
from diagrams.devops import Vercel

with Diagram("个人博客架构", show=False):
	user = User("访客")
	nginx = Nginx("Web 服务")
	backend = Python("Django/Flask")
	db = SQLite("轻量数据库")
	deploy = Vercel("云部署")
	server = Server("轻量服务器")

	user >> nginx >> backend >> db
	deploy >> server
	server >> backend

解读：

• 适合个人博客、小型工具、毕业设计项目
• 使用轻量组件，部署简单，成本低
• 图表清晰，适合写在项目README中

图表样式配置

from diagrams import Diagram
from diagrams.aws.compute import EC2

with Diagram(
	"自定义样式",
	show=False,
	direction="LR",
	filename="custom_style",
	outformat="svg",
	graph_attr={
		"fontsize": "16",
		"bgcolor": "white",
		"labeljust": "center"
	},
	node_attr={
		"fontsize": "12",
		"shape": "box",
		"style": "filled"
	}
):
	EC2("自定义节点样式")

解读：

• filename 指定输出文件名
• outformat 支持PNG、SVG、PDF等格式
• graph_attr与node_attr可自定义背景、字体、形状、颜色

批量节点简化写法

from diagrams import Diagram
from diagrams.aws.compute import EC2

with Diagram("批量节点", show=False):
	# 列表快速生成多个节点
	web_servers = [EC2(f"Web{i}") for i in range(1, 4)]
	[EC2("入口")] >> web_servers

解读：

• 使用列表推导式快速生成多个同类节点
• 适合大规模服务架构，减少重复代码

D2

官网，Declarative Diagramming缩写，开源（GitHub，25.6K Star，759 Fork）、Go实现、现代化的文本生成图表（Text-to-Diagram）语言，开发者通过编写简洁的文本，即可自动生成流程图、系统架构图、网络拓扑图、实体关系图、时序图等各种可视化图表。功能类似于 Mermaid、PlantUML，但在布局能力、美观度、主题系统和工程化支持方面更加现代化。在线体验，直接输入文本即可生成和导出相应的图表。官方文档。

功能特性

• 语法简单：D2采用声明式语法，用户只需使用接近自然语言的文本描述节点和关系，即可完成流程图、架构图、数据流图等复杂图表的绘制。
• 丰富的图形：提供丰富的内置图形体系，涵盖矩形、圆形、菱形、六边形等基础图形，以及人物、数据库、云、文档、队列、软件包、SQL表等面向软件架构和数据建模的专业图形。同时还支持通过image图形加载自定义Logo和Icon，实现AWS、Azure、SAP、Kubernetes等企业级架构元素的可视化展示。
• 自动布局：内置多种布局引擎（Dagre、ELK、TALA），并具备强大的自动布局能力；用户只需定义节点及其关系，无需手工调整位置和连线，系统即可自动生成结构清晰、美观专业的图表。
• Markdown支持：原生支持Markdown内容嵌入，允许在图表中直接添加标题、说明文档、列表、代码片段等富文本信息。
• 代码高亮：支持代码高亮展示，能够在图表中直接嵌入带语法高亮的代码片段，使架构设计与实现代码紧密结合。
• LaTeX公式：支持基于MathJax的数学公式渲染，允许用户在图表中直接嵌入复杂的数学表达式、公式和科学符号，并且自动生成高质量的可视化展示效果。
• 变量与替换：允许用户在图表中定义和复用变量，将颜色、样式、名称、配置参数等公共内容集中管理，并且在多个位置引用。
• 动画功能：能够根据文本描述生成动态演示效果，让图表不仅展示静态结构，还可以呈现流程演进、状态变化和事件发生过程。
• 专业主题系统：提供多种由设计师精心打造的视觉主题，用户无需额外设计即可生成美观、统一且适合展示的专业图表。
• 导出格式：支持将图表导出为多种主流格式，包括SVG、PNG、PDF等静态文件格式，以及适用于网页展示的高质量矢量图输出。
• 多语言支持：具备优秀的多语言支持能力，全面兼容Unicode字符集，能够在图表中直接使用中文、英文、日文、韩文、法文以及Emoji等多种字符内容，无需额外配置即可正确显示。
• 跨平台使用：支持Windows、macOS和Linux等主流操作系统，并且提供统一的命令行工具和一致的使用体验。提供在线Playground、VS Code、Obsidian和Vim等编辑器支持。
• 扩展生态：除官方提供的插件外，还支持通过Python、JavaScript、C#等SDK动态生成图表，并可与MkDocs、MdBook、Pandoc等文档系统集成，实现图表自动渲染和文档自动化。此外，社区还提供PostgreSQL、MySQL、MongoDB到D2的数据库建模工具，以及Structurizr到D2的架构模型导出工具，能够将D2无缝融入软件开发、系统架构设计、知识管理和DevOps流程中。

实战

打开官方提供在线演示，快速体验功能

解读：

• 布局引擎（Layout Engine）支持：Dagre、ELK、TALA
• 主题（Theme）支持：Neutral default、Neutral gray、Flagship Terrastruct、Cool classics、Mixed berry blue、Grape soda、Aubergine、Colorblind clear、Vanilla nitro cola、Orange creamsicle、Shirley temple、Earth tones、Everglade green、Buttered toast、Dark mauve、Dark Flagship Terrastruct、Terminal、Terminal grayscale、Origami
• 渲染器（Renderer）支持：SVG、Sketch、ASCII
• 导出（Export）支持：PNG、SVG

omm

oh-my-*系列迎来又一个成员，oh-my-mermaid缩写，官网，开源（GitHub，2.3K Star，197 Fork）。

oh-my-*系列其他项目：

• oh-my-codex
• oh-my-pi
• oh-my-opencode

类似工具：Code2Architecture、Nexus-skills

实战

基于npm快速安装：npm install -g oh-my-mermaid

命令行使用示例：

omm setup

配置中文输出：omm config language zh

执行omm scan命令产出

.omm/
├── overall-architecture/
│	├── description.md
│	├── diagram.mmd
│	├── context.md
│	├── main-process/
│	│	├── description.md
│	│	└── diagram.mmd
│	└── renderer/
├── data-flow/
└── external-integrations/

执行omm view打开交互式查看器：

• 按视角浏览：整体架构、数据流、外部集成等
• 搜索模块：快速定位关心的部分
• 展开嵌套：复杂模块可以层层展开
• 复制图表：Mermaid 代码可直接粘贴到文档
• 增量绘制：支持按自定义需求重新生成特定模块