时间管理、头脑风暴、阅读、会议记录神器-Mermaid-一一网

这是我参与更文挑战的第3天，活动详情查看：更文挑战

缘起

看到Mermaid是因为我开始用掘金编辑器写文章，日常我会用xmind或者流程图来记录，甚至我还徒手画过xmind。用结构图来梳理内容，更直观，清晰也有更自己得思考，俗话说的好千万字抵不过一张图。看到Mermaid我立马就爱了，用代码生成结构图，其实就相当与手写笔记的过程。这篇文章也就应运而生

你能得到什么

你可以用代码生成任意你想要的流程图、状态图、甘特图、时序图、 饼图、类图、关系图、旅程图
不管在阅读、学习知识、会议纪要、头脑风暴、时间管理这绝对是一款利器，提高学习效率，梳理学习思路在画图的过程中二次知识深化告别点点点，一路coding 一路爽
历史代码可追踪，因为这是代码哇

Mermaid是什么

mermaid 是一个 JS 实现的一个三方库

浅显的理解就是生成图表的 “Markdown语法” 用纯文本格式编写图表

在哪里可以使用Mermaid

js文件中作为三方库引入 npm仓库地址
cdn形式引入

<body>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</body>
复制代码

支持Markdown语法的编辑器比如 掘金编辑器 语雀 印象笔记 Typora Mermaid在线编辑器

图表类型

flowchart 流程图
时序图
甘特图
类图
状态图
关系图
旅程图
饼图

Mermaid – 流程图

基本结构

圆角矩形表示“开始”与“结束”
矩形表示行动方案、普通工作环节用
菱形表示问题判断或判定（审核/审批/评审）环节
用平行四边形表示输入输出
箭头代表工作流方向

流程图与节点的创建

id 存在的意义当节点内多文字过多节点与节点之间的关系复杂即可用id指代当前节点即可

流程图声明：

关键字： graph

源代码

    ```mermaid
    graph             //流程图声明
    S[声明一个流程图] // 节点创建 Id[节点内容]
    
    ```
复制代码

生成结果

节点内容：
- 节点内容为纯文本：
  - 语法：id(纯文本)
  - 源代码
```
    ```mermaid
        graph
        s(节点为纯文本不包含特殊字符)
    ```
复制代码
```
  - 生成结果
- 内容包含特殊字符
  - 语法：id(“内容+特殊字符”)
  - 源代码
```
    ```mermaid
       graph
       s("开始(START)")
   ```
复制代码
```
  - 生成结果
- 内容包含转义字符
  - 语法：id(“:转义字符;”)
  - 源代码
```
    ```mermaid
       graph
       s("开始:#9829;")
   ```
复制代码
```
  - 生成结果

流程图布局

流程图默认的布局为的自上到下

    ```mermaid
    graph 
    s[开始]-->
    e[结束]
    ```
复制代码

自上向下

语法：
- graph BT
- graph TD

源代码：

  ```mermaid
    graph TD
    s[开始]-->
    e[结束  
  ```
复制代码

 ```mermaid
   graph TB
   s[开始]-->
   e[结束  
 ```
复制代码

生成结果

自下向上

语法：
- graph BT

源代码：

  ```mermaid
    graph BT
    s[开始]-->
    e[结束  
  ```
复制代码

生成结果

自左向右

语法:
- graph LR

源代码

  ```mermaid
    graph LR
    s[开始]-->
    e[结束  
  ```
复制代码

生成结果:

自右向左

语法:
- graph RL

源代码

  ```mermaid
    graph RL
    s[开始]-->
    e[结束  
  ```
复制代码

生成结果:

流程图节点形状

矩形

语法： id[节点内容]

源代码

    ```mermaid
    graph
    s[开始]
    e[结束]
    ```
复制代码

生成结果：

圆角矩形节点

语法：id(节点内容)

源代码

    ```mermaid
    graph
    s(开始)
    e(结束)id()
    ```
复制代码

生成结果：

体育场形状

语法：id([内容])

源代码

    ```mermaid
    graph 
    s([开始 - 体育场图]) --> e([结束 - 体育场图])
    ```
复制代码

生成结果：

圆柱形

语法：id[(内容)]

源代码

    ```mermaid
    graph 
   s[(开始 - 圆柱)] --> e[(结束 - 圆柱)]
    ```
复制代码

生成结果：

圆形

语法：id((内容))

源代码

    ```mermaid
    graph 
   s((开始 - 圆柱)) --> e((结束 - 圆柱))
    ```
复制代码

生成结果：

菱形

语法：id{内容}

源代码

    ```mermaid
    graph 
   s{开始 - 菱形} --> e{结束 - 菱形}
    ```
复制代码

生成结果：

六角形

语法：id{{内容}}

源代码

   ```mermaid
    graph 
    s{{开始 - 六角形}} --> e{{结束 - 六角形}}
    ```
复制代码

生成结果：

不对称

语法：id>内容]

源代码

    ```mermaid
    graph 
    s>开始-非对称] --> E>结束-非对称]
    ```
复制代码

生成结果：

平行四边形

语法：
- 右 id[/内容/]
- 左 id[\内容\]

源代码

   ```mermaid
    graph 
    s[\开始\] --> E[/结束/]
    ```
复制代码

生成结果：

梯形

语法：id[/内容]

源代码

    ```mermaid
    graph 
    s[/开始\] --> E[/结束\]
    ```

复制代码

生成结果：

节点与节点之间的链接

实线
- 语法：–
- 源代码：
```
    ```mermaid 
      graph LR
      s[开始] --- e[结束]
    ```
复制代码
```
- 生成效果
  
  © 版权声明
  文章版权归作者所有，未经允许请勿转载。
  THE END
  开发工具
  
  喜欢就支持一下吧
  点赞0 分享
  QQ空间微博 QQ好友海报分享复制链接