需求图、看板、报文结构图与 Beta 实验性图表
除了流程图、时序图等常规图形，Mermaid 还集成了用于高精尖系统工程的需求图（Requirement Diagram）、敏捷开发的看板（Kanban）、网络底层的网络协议报文结构图（Packet），以及一系列强大的 Beta 实验性图表。
一、敏捷看板：轻量级任务卡片流转
敏捷看板（Kanban）非常适合放置在研发文档中，用来直观展现迭代生命周期或周会任务流转状态：
kanban
Todo
设计系统架构
对接 API
In Progress
编写 Markdown 渲染
Done
初始化 Git
轻量看板语法与任务列规则解析：
在这段轻量级看板脚本中，kanban 声明了敏捷看板类型。紧接着，顶格编写看板的一级阶段卡片列名称（如 Todo、In Progress、Done），在其后使用缩进逐一声明对应的具体子任务描述。系统会自动渲染出符合敏捷看板（Kanban Board）标准的高对比度卡片和拖拽式外观，极大地便于产品经理、项目主管对产品周期进行精简把控，且完全没有任何第三方依赖。
二、网络报文结构图：底层协议清晰呈现
在物联网、核心算法或底层网络开发时，我们需要精确表达网络包（Packet）或字节流的帧头结构：
packet-beta
0-7: "源端口 (Source Port)"
8-15: "目的端口 (Destination Port)"
16-31: "校验和 (Checksum)"
网络报文结构（Packet）语法与字节段范围解析：
报文结构图由 packet-beta 声明（处于新版测试特征）。上面的代码精确表达了一个 32-bit (4字节) 的精简网络包帧结构。0-7: "文本" 表示第 0 到第 7 比特位承载源端口数据，8-15 比特位承载目的端口，而最后的 16-31 占用了16个比特位代表整个报文段的校验和。它能在通信技术博客、网络安全教材和分布式协议手册中，清晰呈现复杂的二进制报文帧格式。
三、Beta 实验性图表：雷达图与桑基图
1. 桑基图 (Sankey Flow Diagram)
桑基图用来展示能量、流量或者资金在各个系统节点之间的转移比重与损耗：
sankey-beta
"源端服务","API网关",120
"API网关","MySQL数据库",80
"API网关","Redis缓存",40
桑基图流量节点与权重转换解析：
桑基图使用 sankey-beta 声明。通过 "源节点","目标节点",流入数值 的经典 CSV 式简洁语法，描述系统节点间的流量转移。上方的示例表示源端服务送出了 120 的流量给 API 网关，随后网关将 80 的负载导入了主 MySQL 数据库，而另外 40 的高频数据通过 Redis 缓存层进行拦截。桑基图是系统流量监控与架构资源开销汇报的王牌工具。注意：为了避免语法解析错误，数据行在书写时，每一行首部请勿添加任何多余的缩进空格，且所有节点名字必须用双引号包裹。
2. 雷达能力评估图 (Radar Evaluation Chart)
雷达图非常适合用于多维度能力评估或系统性能指标对比。Mermaid 最新版本提供了极为强大的原生 radar-beta 语法，支持直观定义各个评估维度、设定值区间并以多重多边形曲线（Curve）形式进行对比展现：
radar-beta
title "学生成绩对比"
axis math["数学"], science["科学"], english["英语"], history["历史"], art["艺术"]
curve alice["Alice"]{85, 90, 80, 70, 75}
curve bob["Bob"]{70, 75, 85, 80, 90}
max 100
min 0
原生雷达图配置机制：
利用原生 radar-beta，我们可以使用 axis 指定每个角轴代表的观测属性（如数学、科学、艺术等，并支持使用 ["别名"] 进行国际化展示），通过 curve 为每个评估对象建立对应的连线及各个角轴下的数值。另外，通过 max 和 min 来显式控制雷达图的值域边界，实现最专业、高保真的多维蛛网性能雷达图。
四、常见问题与避坑指南（FAQ）
- 问题：看板
kanban的任务卡片重合或者是阶段列没有横向铺开？- 解决方法：请确保敏捷看板的一级阶段名称（如
Todo）前面没有任何多余的空格，必须严格顶格编写。而具体子任务则必须通过空格或 Tab 进行缩进，否则解析器会将其错认为一个新的阶段列。
- 解决方法：请确保敏捷看板的一级阶段名称（如
- 问题：桑基图
sankey-beta中两个节点发生了循环依赖，导致渲染失败死锁？- 解决方法：桑基图在底层逻辑上必须是一个有向无环图（DAG），它代表能量流失不可逆。严禁在节点连线中出现 A -> B -> A 形式的循环连线，这会导致流量拓扑分配算法陷入无限死循环并报错崩溃。
Specialized Diagrams: Requirements, Kanban, Packet, and Beta Charts
Beyond mainstream diagrams, Mermaid supports specialized Requirements engineering graphs, light-weight agile Kanbans, network Packet layouts, and beta models such as Sankey energy charts.
1. Agile Kanban Boards: Project Management
Agile Kanban charts display task cards moving across iterations or team task lifecycles:
kanban
Todo
Draft system architecture
Connect backend APIs
In Progress
Code Markdown parser
Done
Initialize project git
Kanban Columns Formatting and Hierarchy:
Initiated via kanban, main statuses (e.g. Todo, In Progress) must be declared without any indentations. Sub-tasks under each heading must be indented. This eliminates third-party platform dependencies during developer documentation sprint syncs.
2. Network Packet Layouts: Framing and Bitwise Structures
For network socket design or IoT firmware protocols, mapping bit structures visually inside documentation is key:
packet-beta
0-7: "Source Port"
8-15: "Destination Port"
16-31: "Checksum"
Packet Syntax and Bit Bounding:
Initialized via packet-beta, individual binary structures are defined as StartBit-EndBit: "Title". In this 32-bit packet, the checksum takes up half the frame width (bits 16 to 31). This is perfect for socket API specifications.
3. Experimental Sankey & Radar Diagrams
A. Sankey Flow Diagrams
Sankey flow diagrams represent energy or query load migrations across database topologies and API boundaries:
sankey-beta
"Origin Service","API Gateway",120
"API Gateway","PostgreSQL",80
"API Gateway","Redis Cache",40
Sankey Sinks, Sources, and Weights Syntax:
The graph starts with sankey-beta. Each csv-style line represents "Source","Destination",Weight with no leading whitespaces or indentations. This represents a total flow of 120 units from the origin service into the API gateway, split dynamically between DB operations (80) and caching bypasses (40). Note: All node names must be enclosed in double quotes, and any leading indentation on data rows will cause a parse error in Mermaid's parser.
B. Radar Evaluation Charts
Radar charts are perfect for displaying multi-dimensional grading or metric distributions. In latest versions of Mermaid, you can craft beautiful, native radar diagrams with the new radar-beta syntax:
radar-beta
title "Student Score Comparison"
axis math["Math"], science["Science"], english["English"], history["History"], art["Art"]
curve alice["Alice"]{85, 90, 80, 70, 75}
curve bob["Bob"]{70, 75, 85, 80, 90}
max 100
min 0
Radar Configuration Mechanics:
By using native radar-beta, you can configure custom axes with axis (supporting localized display labels), define multiple grading lines/shapes with curve, and set absolute range boundaries using max and min values. This native rendering engine creates robust, accurate蛛网 (spiderweb) diagrams for evaluation metrics.
4. FAQ
- Why are my Kanban column headers piling up vertically?
- Solution: Ensure your status names are aligned directly to the leftmost margin without any leading spaces.
- Why does my Sankey diagram throw recursive loop exceptions?
- Solution: Sankey charts require Directed Acyclic Graphs (DAG). Avoid circular linkages (like A -> B -> A) to prevent rendering algorithms from throwing stack overflows.