Mermaid语法生成看板图 - Mermaid看板图语法和教程

看板图

Mermaid 看板图允许你创建任务在工作流程不同阶段流转的可视化表示，下文解释了如何正确使用看板图语法。

基础

看板图以 kanban 语法开头，然后定义列以及这些列中的任务。

代码：

                            
                                
                                    
                                    复制
                                
                                
                                    
                                    嵌入
                                
                            
                            
                                kanban
  column1[Column Title]
    task1[Task Description]

定义列

列代表工作流程中的不同阶段，例如“待办事项”、“进行中”、“已完成”等。每列都使用唯一标识符和用中括号括起来的标题来定义。

语法：

                            
                                
                                    
                                    复制
                                
                                
                                    
                                    嵌入
                                
                            
                            columnId[Column Title]

columnId：列的唯一标识符。
[Column Title]：显示在列投的标题。

比如 id1[Todo]

向列添加任务

任务按各自的列展示，并带有缩进。每个任务包括一个唯一标识符和用中括号括起来的描述。

语法：

                            
                                
                                    
                                    复制
                                
                                
                                    
                                    嵌入
                                
                            
                            taskId[Task Description]

taskId：任务的唯一标识符。,[Task Description]: 任务的描述。

示例：

                            
                                
                                    
                                    复制
                                
                                
                                    
                                    嵌入
                                
                            
                            docs[Create Documentation]

向任务添加元数据

你可以使用 @{ ... } 语法为每个任务添加额外的元数据。元数据可以包含 assigned、ticket、priority 等键值对，这将在节点的渲染中显示出来。

支持的元数据键

分配给：指定谁负责该任务。,工单：将任务链接到工单或问题编号。,优先级：表示任务的紧急程度。允许的值：非常高，高，低和非常低。

代码：

                            
                                
                                    
                                    复制
                                
                                
                                    
                                    嵌入
                                
                            
                            
                                kanban
todo[Todo]
  id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }

配置选项

你可以使用 markdown 文件开头的配置块自定义看板图。这对于设置全局设置（如票证的基本 URL）很有用。目前，看板图 <code>ticketBaseUrl</code> 这对于设置全局设置非常有用，例如工单的基础 URL。目前看板图表有一个配置选项 ticketBaseUrl。可以按以下示例进行设置：

                            
                                
                                    
                                    复制
                                
                                
                                    
                                    嵌入
                                
                            
                            ---
config:
  kanban:
    ticketBaseUrl: 'https://yourproject.atlassian.net/browse/#TICKET#'
---

当看板条目有指定的工单号码时，图中的工单号码将包含一个指向定义该工单的外部系统的链接。ticketBaseUrl 设置指向外部系统的基础 URL，而 #TICKET# 会被任务元数据中的工单值替换，以创建有效的链接。

完整示例

以下是一个完整看板图代码示例：

代码：

                            
                                
                                    
                                    复制
                                
                                
                                    
                                    嵌入
                                
                            
                            
                                ---
config:
  kanban:
    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
  Todo
    [Create Documentation]
    docs[Create Blog about the new diagram]
  [In progress]
    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
  id9[Ready for deploy]
    id8[Design grammar]@{ assigned: 'knsv' }
  id10[Ready for test]
    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
  id11[Done]
    id5[define getData]
    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }

  id12[Can't reproduce]
    id3[Weird flickering in Firefox]

总之，在 Mermaid 中创建看板图是一个简单的过程，可以有效地可视化你的工作流程。

你可以使用 @{ ... } 语法向任务添加可选元数据来增强你的图表，这个语法允许你包含额外的上下文信息，如负责人、工单编号和优先级。对于进一步的自定义，请使用文件顶部的配置块来设置全局选项，例如 ticketBaseUrl，以便直接从图表中链接工单。

通过遵循这些指南，确保唯一标识符、正确缩进，并利用元数据和配置选项，你可以创建一个全面且定制化的看板图，有效地映射项目的工作流程。