使用markdown画流程图

最新推荐文章于 2025-03-25 08:59:18 发布

不会Hello World的小苗

最新推荐文章于 2025-03-25 08:59:18 发布

阅读量3.2k

点赞数 4

文章标签：流程图

本文链接：https://blog.csdn.net/tm1560000/article/details/142853080

版权

1. 基本语法

2.示例：

3.自定义节点样式：

在Markdown中，使用流程图可以通过Mermaid语法来实现。Mermaid 是一种图表生成工具，可以绘制流程图、序列图、甘特图等。下面是使用Markdown绘制流程图的教程。

1. 基本语法：

首先，我们使用 mermaid 标签来声明流程图的代码块，格式如下：

```mermaid
graph TD;
    A[节点A] --> B[节点B];
    B --> C[节点C];


---------------------------------------------------------------------------

- `graph TD` 表示绘制从上到下的流程图。TD 代表 "Top to Down"。
- `A --> B` 表示从节点A指向节点B。
- 节点的内容用方括号 `[]` 表示，形状可以是圆角矩形 `[节点]` 或者圆形 `(节点)`。

### 2. 图的方向

可以使用不同的方向控制流程图的布局方式：
- `TD`：从上到下 (Top to Down)
- `LR`：从左到右 (Left to Right)
- `BT`：从下到上 (Bottom to Top)
- `RL`：从右到左 (Right to Left)

例如：

```markdown
```mermaid
graph LR;
    A[节点A] --> B[节点B];
    B --> C[节点C];
------------------------------------------------------------------------------

### 3. 多分支流程

一个节点可以指向多个节点，表示流程的不同分支。示例如下：

```markdown
```mermaid
graph TD;
    A[开始] --> B[步骤1];
    B --> C[步骤2];
    B --> D[步骤3];
    C --> E[结束];
    D --> E;


这将绘制一个从 `步骤1` 分支到 `步骤2` 和 `步骤3` 的流程。
------------------------------------------------------------------------------

### 4. 使用不同的节点形状

Mermaid 支持多种节点形状：
- 圆角矩形：`A[内容]`
- 圆形：`A((内容))`
- 菱形：`A{内容}`

例如：

```markdown
```mermaid
graph TD;
    A[开始] --> B{决策点};
    B -->|是| C[分支1];
    B -->|否| D[分支2];
    C --> E[结束];
    D --> E;
------------------------------------------------------------------------------
### 5. 添加样式

可以为节点和边线添加不同的样式：

```markdown
```mermaid
graph TD;
    A[开始] --> B[步骤1];
    B -.-> C[步骤2];
    C ==> D[结束];


- `-.->` 表示虚线箭头。
- `==>` 表示加粗箭头。
------------------------------------------------------------------------------

### 6. 示例

这是一个完整的例子，包含了各种流程图元素：

```markdown
```mermaid
graph TD;
    A[开始] --> B{是否继续};
    B -->|是| C[执行任务1];
    B -->|否| D[退出];
    C --> E[执行任务2];
    E --> F[结束];
    D --> F;
------------------------------------------------------------------------------

### 小结

- 使用 `mermaid` 标签来创建流程图。
- 使用 `-->` 来连接节点，指定流程走向。
- 可以通过不同的方向、分支、形状和样式来丰富流程图的表达。

2.示例：

使用markdown画一个西安旅游的流程图，详细标注时间地点。

# 西安旅游流程图

```mermaid
graph TD;
    A[到达西安] --> B[第一天: 上午 - 大雁塔广场 9:00]
    B --> C[第一天: 下午 - 陕西历史博物馆 14:00]
    C --> D[第一天: 晚上 - 回民街美食体验 18:00]
    D --> E[第二天: 上午 - 兵马俑博物馆 9:00]
    E --> F[第二天: 下午 - 华清宫 14:00]
    F --> G[第二天: 晚上 - 大唐芙蓉园 18:30]
    G --> H[第三天: 上午 - 钟楼鼓楼 9:00]
    H --> I[第三天: 下午 - 西安城墙 14:00]
    I --> J[第三天: 晚上 - 解放路商业街 18:00]
    J --> K[结束行程]

3.自定义节点样式：

每个节点的背景颜色 (fill)

边框颜色 (stroke)

以及边框的粗细 (stroke-width)

例如：

style A fill:#1d9fe4,stroke:#e84133,stroke-width:2px

style A fill:#1d9fe4,stroke:#e84133,stroke-width:2px：为节点 A（到达西安）设置填充颜色为蓝色，边框颜色为红色，边框宽度为2px。


```mermaid
graph TD;
    A[到达西安] --> B[第一天: 上午 - 大雁塔广场 9:00]
    B --> C[第一天: 下午 - 陕西历史博物馆 14:00]
    C --> D[第一天: 晚上 - 回民街美食体验 18:00]
    D --> E[第二天: 上午 - 兵马俑博物馆 9:00]
    E --> F[第二天: 下午 - 华清宫 14:00]
    F --> G[第二天: 晚上 - 大唐芙蓉园 18:30]
    G --> H[第三天: 上午 - 钟楼鼓楼 9:00]
    H --> I[第三天: 下午 - 西安城墙 14:00]
    I --> J[第三天: 晚上 - 解放路商业街 18:00]
    J --> K[结束行程]

    %% 自定义样式
    style A fill:#1d9fe4,stroke:#e84133,stroke-width:2px
    style B fill:#e84133,stroke:#333,stroke-width:2px
    style C fill:#9f9,stroke:#333,stroke-width:2px
    style D fill:#f99,stroke:#333,stroke-width:2px
    style E fill:#1d9fe4,stroke:#333,stroke-width:2px
    style F fill:#e84133,stroke:#333,stroke-width:2px
    style G fill:#9f9,stroke:#333,stroke-width:2px
    style H fill:#f99,stroke:#333,stroke-width:2px
    style I fill:#1d9fe4,stroke:#e84133,stroke-width:2px
    style J fill:#e84133,stroke:#333,stroke-width:2px
    style K fill:#9f9,stroke:#333,stroke-width:2px