-
Mermaid State Diagram: state machines, transitions, and concurrent states
Mermaid’s State Diagram lets you describe state machines in plain text — faster than Visio, more precise than Flowchart for describing entity lifecycles. Ideal for: order status, user lifecycle, a... -
Mermaid State Diagram 教程：状态机、状态转换与正交状态
Mermaid 的 State Diagram（状态图）让你用文本描述状态机——比画 Visio 快，比写代码更直观。适合：订单状态流转、用户生命周期、审批流程、协议状态机。 为什么选 State Diagram 而不是 FlowchartFlowchart（流程图）描述的是过程——做什么、先做什么后做什么。State Diagram 描述的是状态——系统/实体在什么时候处于什... -
PlantUML in CI/CD: GitHub Actions auto-render, PR checks, and drift detection
PlantUML diagrams are code, but unlike regular code they have no lint/compile checks. This post covers: auto-render on every push, PR diagram diff comments, drift detection, and full CI pipel... -
PlantUML + CI/CD：GitHub Actions 自动渲染图、PR 检查与 Drift Detection
团队里 PlantUML 图越来越多，怎么保证每个人的 .puml 文件都正确渲染？PR 里的图怎么自动检查？代码变了图没同步怎么办？这一篇用 GitHub Actions 全解决。 为什么要把 PlantUML 集成到 CIPlantUML 图是代码，但它不像普通代码那样有 lint/编译检查。常见问题： .puml 文件有语法错误，上线了才发现图渲染不出来 代码改了，但忘... -
PlantUML deployment diagrams: blue-green, canary, and rolling deployments
Deployment diagrams describe the physical structure of your software — which servers, containers, and networks it runs on. PlantUML’s deployment view precisely captures servers, containers, networ... -
PlantUML 画部署图：蓝绿部署、灰度发布与金丝雀发布
部署图（Deployment Diagram）是架构评审、团队对齐、故障排查最重要的图之一。用 PlantUML 的 deployment 视图，可以精确描述服务器、容器、网络拓扑和部署策略。 部署图是什么部署图描述软件的物理部署结构——在哪台服务器上运行、用什么容器、有没有负载均衡、数据库在哪。它回答”这个系统是怎么跑起来的”这个问题。 对比： 组件图：描述软件模块之间的关系（逻辑结... -
PlantUML ER diagrams: from database schema to entity relationship diagrams
ER (Entity Relationship) diagrams are the most important tool in database design. PlantUML’s ER diagram syntax turns your schema into a clean, version-controllable diagram that lives next to your ... -
PlantUML ER 图实战：从数据库设计到实体关系图
ER 图（Entity Relationship Diagram，实体关系图）是数据库设计最重要的工具。用 PlantUML 画 ER 图，可以直接从数据库 schema 出图，也可以手画结构后交给团队 review。 ER 图是什么ER 图描述实体（表）、属性（字段）、关系（外键约束）三者之间的关系。数据库设计初期用来理清概念，数据架构评审时用来对齐理解，重构时用来追踪影响。 常见场景... -
Mermaid Flowchart advanced: node shapes, edges, Subgraph grouping, and Layout directions
Mermaid’s Flowchart is its flagship feature — closer to hand-drawn diagrams than PlantUML’s Activity diagram. This post covers everything: shapes, edges, Subgraph, directions, styling, and how it ... -
Mermaid Flowchart 进阶：从节点形状到 Subgraph 拆图
Mermaid 的 Flowchart（流程图）是它最招牌的功能——比 PlantUML 的 Activity 图更接近手绘风格，上手更快、样式更灵活。这一篇把它讲透。 为什么选 Flowchart 而不是 Activity 图PlantUML 有 activity diagram（活动图），但它是 UML 风格的——起点/终点用实心圆、分叉用菱形、并行用 fork/...