css3酷炫网站海外网站

本文介绍使用mermaid画流程图，并给出几个示例。

背景

目前，除有明确格式要求的文档外，笔者一般使用markdown写文档、笔记。当文档有图片时，使用Typora等软件可实时渲染，所见即所得。但如果文档接收方没有安装相关工具，效果则会大打折扣。Typora支持导出不同格式的文件。如果导出为pdf，对文字拷贝不友好。如果导出为word，格式不友好。

笔者的部分文档，shell命令、代码版本较多，因此选定html格式，体积小，方便浏览，但对图片不友好。但是，如果只是涉及流程图，则可以考虑用mermaid绘制。

笔者先前知道这个东西，但没用起来，最近因为一份非正式文档要发布于内网，且有流程图，于是用之，便有了本文。

实践

用法

在Typora中使用mermaid即可绘制流程图。语法如下：

```mermaid
graph TD
这里开始绘制
```

如果语法正确，即时可见效果，如出错，会有提示，示例如下：

下面列出画图的笔记。

graph TD 方向从上(Top)到下(Down)
direction LR：方向从左(Left)到右(Right)
开始([开始做事])：椭圆形，与程序流程图的开始、结束类似。子流程：%% 这是准备工作子流程subgraph 准备工作direction LR%%...end黄色虚线：
style 打道回府 fill:#FFFFF0,stroke-dasharray:5,stroke-width:2px,stroke:#000

示例：简单的登录流程（有判断条件）

代码：

graph TDA([开始]) --> B[输入用户名和密码]B --> C{验证成功?}C -->|是| D[进入主页]C -->|否| E[显示错误信息]D --> F([结束])E --> Bstyle A fill:#D5E8D4,stroke:#333,stroke-width:2pxstyle F fill:#D5E8D4,stroke:#333,stroke-width:2pxstyle C fill:#FFD2D2,stroke:#333,stroke-width:2px

效果图如下：

示例 ：订单处理流程（有判断条件）

代码：

graph TDA([开始]) --> B[接收订单]B --> C[检查库存]C --> D{库存充足?}D -->|是| E[确认订单]D -->|否| F[通知库存不足]E --> G[安排发货]G --> H([结束])F --> Hstyle A fill:#D5E8D4,stroke:#333,stroke-width:2pxstyle H fill:#D5E8D4,stroke:#333,stroke-width:2pxstyle D fill:#FFD2D2,stroke:#333,stroke-width:2px

效果图：

示例 ：产品发布流程

代码：

graph TDA([项目启动]) --> B[需求分析]B --> C[设计系统架构]C --> D[开发]D --> E[测试]E --> F{测试通过?}F -->|是| G[部署上线]F -->|否| H[修复问题]H --> EG --> I([项目结束])style A fill:#D5E8D4,stroke:#333,stroke-width:2pxstyle I fill:#D5E8D4,stroke:#333,stroke-width:2pxstyle F fill:#FFD2D2,stroke:#333,stroke-width:2px

效果图：

示例：有子流程图的流程

代码：

graph TD%% 这是准备工作子流程subgraph 准备工作direction LR准备1 --> 检查清单检查清单 --> 确认清单endsubgraph 工作阶段1direction LR阶段1开始 --> 阶段1结束endsubgraph 出发endsubgraph 工作阶段2direction LR阶段2开始 --> 阶段2事情1阶段2事情1 --> 一个事阶段2事情1 --> 另一个事endsubgraph 再次检查direction LR检查开始 --> 检查结束endsubgraph 打道回府direction LR收拾1 -.-> 收拾2end开始([开始做事]) --> 准备工作准备工作 --> 工作阶段1工作阶段1 --> 出发出发 --> 工作阶段2工作阶段2 --> 再次检查再次检查 --> 结束([结束做事])%% 虚拟结束([结束做事]) -.-> 打道回府%% 虚线style 打道回府 fill:#FFFFF0,stroke-dasharray:5,stroke-width:2px,stroke:#000

效果图：

graph TD%% 这是准备工作子流程subgraph 准备工作direction LR准备1 --> 检查清单检查清单 --> 确认清单endsubgraph 工作阶段1direction LR阶段1开始 --> 阶段1结束endsubgraph 出发endsubgraph 工作阶段2direction LR阶段2开始 --> 阶段2事情1阶段2事情1 --> 一个事阶段2事情1 --> 另一个事endsubgraph 再次检查direction LR检查开始 --> 检查结束endsubgraph 打道回府direction LR收拾1 -.-> 收拾2end开始([开始做事]) --> 准备工作准备工作 --> 工作阶段1工作阶段1 --> 出发出发 --> 工作阶段2工作阶段2 --> 再次检查再次检查 --> 结束([结束做事])%% 虚拟结束([结束做事]) -.-> 打道回府%% 虚线style 打道回府 fill:#FFFFF0,stroke-dasharray:5,stroke-width:2px,stroke:#000

部分markdown工具正确渲染，下面是效果图的截图。

示例：有主流程、详细流程的流程

代码：

graph TDsubgraph 主要流程A[开始做事] --> B[准备工作]B --> C[工作阶段1]C --> D[工作阶段2]D --> E[结束做事]endsubgraph 准备工作direction RLF[准备1]G[检查清单]H[再次检查清单]endsubgraph 工作阶段1direction RLI[阶段1开始]J[阶段1结束]K[出发]endsubgraph 工作阶段2direction RLL[阶段2开始]M[阶段2事情1]N[一个事]O[另一个事]endsubgraph 结束做事direction RLP[再次检查]Q[收拾1]R[收拾2]endB --> 准备工作C --> 工作阶段1D --> 工作阶段2E --> 结束做事style A fill:#D5E8D4,stroke:#333,stroke-width:2pxstyle B fill:#DAE8FC,stroke:#333,stroke-width:2pxstyle C fill:#DAE8FC,stroke:#333,stroke-width:2pxstyle D fill:#DAE8FC,stroke:#333,stroke-width:2pxstyle E fill:#D5E8D4,stroke:#333,stroke-width:2pxstyle F fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle G fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle H fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle I fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle J fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle K fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle L fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle M fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle N fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle O fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle P fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle Q fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle R fill:#FFF2CC,stroke:#333,stroke-width:2px

效果图：

graph TDsubgraph 主要流程A[开始做事] --> B[准备工作]B --> C[工作阶段1]C --> D[工作阶段2]D --> E[结束做事]endsubgraph 准备工作direction RLF[准备1]G[检查清单]H[再次检查清单]endsubgraph 工作阶段1direction RLI[阶段1开始]J[阶段1结束]K[出发]endsubgraph 工作阶段2direction RLL[阶段2开始]M[阶段2事情1]N[一个事]O[另一个事]endsubgraph 结束做事direction RLP[再次检查]Q[收拾1]R[收拾2]endB --> 准备工作C --> 工作阶段1D --> 工作阶段2E --> 结束做事style A fill:#D5E8D4,stroke:#333,stroke-width:2pxstyle B fill:#DAE8FC,stroke:#333,stroke-width:2pxstyle C fill:#DAE8FC,stroke:#333,stroke-width:2pxstyle D fill:#DAE8FC,stroke:#333,stroke-width:2pxstyle E fill:#D5E8D4,stroke:#333,stroke-width:2pxstyle F fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle G fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle H fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle I fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle J fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle K fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle L fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle M fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle N fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle O fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle P fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle Q fill:#FFF2CC,stroke:#333,stroke-width:2pxstyle R fill:#FFF2CC,stroke:#333,stroke-width:2px

总结

鉴于实践经验少，因此画的流程图也少。从上文可以看到，有些图的样式不太美观，这需再细调。

另外，除那个有虚线的图是自己手工绘制外，其它均借用AI工具生成。