企业官网建设流程全解析

概述

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

• 超强大免费绘图工具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

入门案例

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

解读：

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

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

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

fromdiagramsimportDiagram,Clusterfromdiagrams.aws.computeimportEC2fromdiagrams.aws.databaseimportRDS,ElastiCachefromdiagrams.aws.networkimportELBfromdiagrams.aws.storageimportS3withDiagram("复杂 Web 架构",show=False,direction="LR"):# 定义客户端client=EC2("用户客户端")# 前端服务集群withCluster("前端服务组"):lb=ELB("负载均衡")servers=[EC2("Web 1"),EC2("Web 2"),EC2("Web 3")]# 数据服务集群withCluster("数据层"):db=RDS("主库")cache=ElastiCache("Redis缓存")storage=S3("对象存储")# 建立调用关系client>>lb>>servers servers>>db servers>>cache servers>>storage

解读：

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

微服务基础架构

fromdiagramsimportDiagram,Clusterfromdiagrams.onprem.clientimportUserfromdiagrams.onprem.computeimportServerfromdiagrams.onprem.databaseimportPostgreSQLfromdiagrams.onprem.inmemoryimportRedisfromdiagrams.onprem.networkimportNginxfromdiagrams.onprem.queueimportRabbitMQfromdiagrams.onprem.loggingimportELKwithDiagram("微服务架构",show=False,direction="TB"):user=User("用户")withCluster("网关层"):gateway=Nginx("网关服务")withCluster("业务微服务"):user_service=Server("用户服务")order_service=Server("订单服务")pay_service=Server("支付服务")withCluster("中间件"):mq=RabbitMQ("消息队列")cache=Redis("缓存")db=PostgreSQL("数据库")withCluster("日志监控"):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系列节点，适用于自建机房、私有部署架构
• 清晰划分网关层、业务服务、中间件、监控系统
• 多服务统一调用中间件，结构一目了然

前后端分离项目

fromdiagramsimportDiagramfromdiagrams.onprem.clientimportUserfromdiagrams.onprem.computeimportServerfromdiagrams.onprem.containerimportDockerfromdiagrams.onprem.databaseimportMongoDBfromdiagrams.onprem.networkimportNginxfromdiagrams.programming.languageimportPython,Javascriptfromdiagrams.devopsimportGit,JenkinswithDiagram("前后端分离架构",show=False):user=User("用户")frontend=Javascript("前端 Vue/React")web=Nginx("Web 服务")backend=Python("后端服务")db=MongoDB("数据库")withCluster("DevOps 流程"):git=Git("代码仓库")ci=Jenkins("CI/CD")docker=Docker("容器部署")user>>frontend>>web>>backend>>db git>>ci>>docker>>backend

解读：

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

Docker+Kubernetes架构

fromdiagramsimportDiagram,Clusterfromdiagrams.onprem.clientimportUserfromdiagrams.onprem.containerimportDockerfromdiagrams.k8s.computeimportPod,Deploymentfromdiagrams.k8s.networkimportIngress,Servicefromdiagrams.k8s.clusterimportNodefromdiagrams.onprem.monitoringimportPrometheus,GrafanawithDiagram("K8s 容器架构",show=False,direction="LR"):user=User("用户")withCluster("K8s 集群"):ingress=Ingress("入口")svc=Service("服务")deploy=Deployment("部署")pods=[Pod("Pod 1"),Pod("Pod 2")]node=Node("工作节点")withCluster("监控系统"):prom=Prometheus("监控采集")graf=Grafana("可视化")docker=Docker("容器")user>>ingress>>svc>>deploy>>pods>>node pods>>docker pods>>prom prom>>graf

解读：

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

电商平台极简架构

fromdiagramsimportDiagram,Clusterfromdiagrams.onprem.clientimportUserfromdiagrams.onprem.networkimportNginxfromdiagrams.onprem.computeimportServerfromdiagrams.onprem.databaseimportMySQLfromdiagrams.onprem.queueimportRabbitMQfromdiagrams.onprem.inmemoryimportRedisfromdiagrams.aws.storageimportS3fromdiagrams.onprem.securityimportVaultwithDiagram("电商平台架构",show=False):users=User("用户")withCluster("接入层"):lb=Nginx("负载均衡")withCluster("业务服务"):goods=Server("商品服务")order=Server("订单服务")pay=Server("支付服务")user_srv=Server("用户服务")withCluster("数据与中间件"):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]

解读：

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

个人项目/博客系统架构

fromdiagramsimportDiagramfromdiagrams.onprem.clientimportUserfromdiagrams.onprem.networkimportNginxfromdiagrams.programming.languageimportPythonfromdiagrams.onprem.databaseimportSQLitefromdiagrams.onprem.hostingimportServerfromdiagrams.devopsimportVercelwithDiagram("个人博客架构",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中

图表样式配置

fromdiagramsimportDiagramfromdiagrams.aws.computeimportEC2withDiagram("自定义样式",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可自定义背景、字体、形状、颜色

批量节点简化写法

fromdiagramsimportDiagramfromdiagrams.aws.computeimportEC2withDiagram("批量节点",show=False):# 列表快速生成多个节点web_servers=[EC2(f"Web{i}")foriinrange(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/ ├──>