markdown建议上手之-图表绘制

流程图绘制相关

mermaid简述

特性：Mermaid制图是一种基于文本的图表绘制方法，它使用类似于Markdown的语法来描述图表，并可以将其转换为SVG或其他图形格式进行展示。特点是简单易学功能强大，能够满足大部分简易制图要求，（要是太难了为什么不直接贴图呢）

其他：

• Mermaid支持通过CSS样式来自定义图表的外观和布局。（不建议，太复杂不如贴图）
• Mermaid图表可以导出为PNG、SVG等常见的图像格式。（不会，遇到了在学）
• Mermaid支持插件和编辑器的集成，使得用户可以更加高效地使用和管理Mermaid图表。
• 在Markdown编辑器中，可以直接使用Mermaid语法来创建和渲染图表。（Typora可以）。
• 支持流程图、序列图、甘特图。

注意：

• 在markdown编辑中，要写在代码框里，所以要先在最开始打出```mermaid 唤醒这个对应代码（Typora里）。

简单的流程图：

graph TB  
A[开始] --> B[处理]  
B --> C{判断}  
C -- 是 --> D[结束]  
C -- 否 --> E[处理]  
E --> B

简单的序列图：

sequenceDiagram  
A->>B: 消息1  
B->>C: 消息2  
C-->>A: 响应  
loop 循环操作  
  A->>B: 消息3  
end

简单的甘特图

gantt  
dateFormat  YYYY-MM-DD  
title       项目进度  
section SectionA  
TaskA       :active,    a1, 2023-01-01, 30d  
TaskB       :           b1, after a1, 20d

具体语法

主要分成三层：
标志层：选择graph、sequenceDiagram 、gantt选择你要制的图
语法层：中间填入对应语法
结束层：end表示结束

流程图（Flowchart）

• 使用graph关键词定义图表类型，如graph TB（从上到下）或graph RL（从右到左）。
• 使用A --> B表示从节点A到节点B的箭头。
• 支持条件判断，如C -- 是 --> D[结果1]。

序列图（Sequence Diagram）

• 使用sequenceDiagram关键词定义。
• 通过->>表示参与者之间的消息传递。
• 可以使用loop、alt等关键词描述循环和选择结构。

甘特图（Gantt Chart）

• 使用gantt关键词定义。
• 定义任务和时间轴，如section SectionName和TaskName :crit, active, x-day1, x3-day4。

节点形状

• 节点可以通过不同的括号和关键词来定义形状，如：
  • [方形]
  • (圆边矩形)
  • ((圆形))
  • {菱形}
  • // 注释