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

您所在的位置：网站首页 › 手写日程app › 时间管理、头脑风暴、阅读、会议记录神器

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

2023-09-30 00:37| 来源: 网络整理| 查看: 265

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

缘起

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

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

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

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

在哪里可以使用Mermaid js文件中作为三方库引入 npm仓库地址 cdn形式引入支持Markdown语法的编辑器比如掘金编辑器语雀印象笔记 Typora Mermaid在线编辑器 IDE：VScode中下载插件：Markdown Preview Mermaid Support 图表类型

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[结束] ``` 生成效果 graph LR s[开始] --- e[结束]

虚线

语法 -.- 源代码 ```mermaid graph LR s[开始] -.- e[结束] ``` 生成效果 graph LR s[开始] -.- e[结束]

粗链接线

=== 源代码 ```mermaid graph LR s[开始] === e[结束] ``` 生成效果 graph LR s[开始] === e[结束]

实线箭头

语法 -->

源代码

```mermaid graph LR s[开始] --> e[结束] ```

生成效果:

graph LR s[开始] --> e[结束]

虚线箭头

语法 -.-> 源代码 ```mermaid graph LR s[开始] -.-> e[结束] ``` 生成效果： graph LR s[开始] -.-> e[结束]

粗线箭头

语法 ==> 源代码 ```mermaid graph LR s[开始] ==> e[结束] ``` 生成效果 graph LR s[开始] ==> e[结束]

带文字的链接线-实线

语法 --内容--- 或者 --->|内容|

源代码

```mermaid graph LR s[开始] --过程--- e[结束] ```

或者

```mermaid graph LR s[开始] --->|过程| e[结束] ```

生成效果：

graph LR s[开始] --过程--- e[结束]

带文字的链接线-虚线

语法 -.内容.->

源代码

```mermaid graph LR s[开始] -.过程.-> e[结束] ```

生成效果：

graph LR s[开始] -.过程.-> e[结束]

带文字的链接线-实线粗线

语法 ==内容==>

源代码

```mermaid graph LR s[开始] ==过程==> e[结束] ```

生成效果：

graph LR s[开始] ==过程==> e[结束] 关系链 1. 流程关系横向纵向

单行

源代码

```mermaid graph LR s[买菜] --走路-->P[菜市场]--付钱--> e[结束买菜] ```

生成效果

graph LR s[买菜] --走路-->P[菜市场]--付钱--> e[结束买菜]

多行

源代码

```mermaid graph LR s[买菜] --走路-->P[菜市场]--付钱--> e[结束买菜] s--走路--> o[永辉超市]--付钱--> e ```

生成效果

graph LR s[买菜] --走路-->P[菜市场]--付钱--> e[结束买菜] s--走路--> o[永辉超市]--付钱--> e 2. 闭合关系源代码（单循环）： ```mermaid graph LR s[家] --走路-->P[菜市场]--走路-->L[水果店]--走路--> j[超市]-->s ``` 生成效果 graph LR s[家] --走路-->P[菜市场]--走路-->L[水果店]--走路--> j[超市]-->s 源代码（多循环）： ```mermaid graph LR s[买菜] --走路-->P[菜市场]--付钱--> s s--网上--> o[永辉超市]--付钱--> s ``` 生成效果 graph LR s[买菜] --走路-->P[菜市场]--付钱--> s s--网上--> o[永辉超市]--付钱--> s 3. 平行与交叉关系

张三李四都会内卷和躺平

graph z[张三]-->C[内卷] & D[躺平] graph L[李四]-->C[内卷] & D[躺平]

合并

源代码 ```mermaid graph z[张三]-->C[内卷] z-->D[躺平] L[李四]-->C[内卷] L-->D ``` graph z[张三]-->C[内卷] z-->D[躺平] L[李四]-->C[内卷] L-->D

更简易的写法只需要一行

源代码 ```mermaid graph z[张三] & L[李四]-->C[内卷] & D[躺平] ``` 生成效果 graph z[张三] & L[李四]-->C[内卷] & D[躺平] 4. 控制连接长度源代码 ```mermaid graph z[张三]-->X{选择躺平还是内卷} x--内卷-->Y[努力] Y--努力-->R[重新思考] R-->X X-->|躺平|N[喝快乐水] ``` graph z[张三]-->X{选择躺平还是内卷} x--内卷-->Y[努力] Y--努力-->R[重新思考] R-->X X-->|躺平|N[喝快乐水]

上图可得当角色选择躺平得逻辑不是预期得展示需要调整选择增加躺平得长度逻辑即可正确

源代码 ```mermaid graph z[张三]-->X{选择躺平还是内卷} x--内卷-->Y[努力] Y--努力-->R[重新思考] R-->X X--->|躺平|N[喝快乐水] //增加长度 graph z[张三]-->X{选择躺平还是内卷} x--内卷-->Y[努力] Y--努力-->R[重新思考] R-->X X--->|躺平|N[喝快乐水]

逻辑上躺平与重新思考并不是平行关系理想状态选择躺平长度大于选择内卷可用----> 链接线会增加2个层级的长度

源代码： ```mermaid graph z[张三]-->X{选择躺平还是内卷} x--内卷-->Y[努力] Y--努力-->R[重新思考] R-->X X--躺平---->N[喝快乐水] ``` graph z[张三]-->X{选择躺平还是内卷} x--内卷-->Y[努力] Y--努力-->R[重新思考] R-->X X--躺平---->N[喝快乐水]

可用----> 链接线会增加3个层级的长度一下是各个类型连接线增加层级长度语法

增加层级长度123实线------------带箭头的实线-->--->---->粗实线============带箭头的粗实线==>===>====>虚线-.--..--...-带箭头的虚线-.->-..->-...-> 子图表 subgraph 基本语法 graph 节点关系 subgraph title //子图表的名称子图表的节点关系 end //子图标结束标志源代码 ```mermaid graph TB c1-->a2 subgraph 表1 a1-->a2 end subgraph 表2 b1-->b2 end subgraph 表3 c1-->c2 end ``` 生成效果 graph TB c1-->a2 subgraph 表1 a1-->a2 end subgraph 表2 b1-->b2 end subgraph 表3 c1-->c2 end 交互为节点添加事件以及点击跳转这个现在还不是很好用语法： var callback = function(){ alert('A callback was triggered'); } 源代码： ```mermaid graph LR; A-->B; B[跳转百度]-->C; C-->D; click A callback "Tooltip for a callback" click B "http://www.baidu.com" "This is a tooltip for a link" click A call callback() "Tooltip for a callback" click B href "http://www.github.com" "This is a tooltip for a link" ``` 生成效果 graph LR; A-->B; B[跳转百度]-->C; C-->D; click A callback "Tooltip for a callback" click B "http://www.baidu.com" "This is a tooltip for a link" click A call callback() "Tooltip for a callback" click B href "http://www.github.com" "This is a tooltip for a link" 注释

语法 %%

源代码

```mermaid graph LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C ```

生成效果

graph LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C 添加样式方式1

我们需要给开始和结束添加样式

语法： style id key:value,key:value 源代码： ```mermaid graph LR s["开始(实线边框，4px，边框颜色：#007fff 掘金蓝 ,背景色：red)"] e["结束(虚线边框，4px，边框颜色：red,背景色：#007fff 掘金蓝文本颜色为白色)"] style s fill:red ,stroke:#007fff,stroke-width:4px style e fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff ``` 生成效果 graph LR s["开始(实线边框，4px，边框颜色：#007fff 掘金蓝 ,背景色：red)"] e["结束(虚线边框，4px，边框颜色：red,背景色：#007fff 掘金蓝文本颜色为白色)"] style s fill:red ,stroke:#007fff,stroke-width:4px style e fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff 方式2 类定义样式 class 语法：classDef className 样式定义应用 :::classname 源代码： ```mermaid graph LR s[开始]:::ownstyle-->e[结束] classDef ownstyle fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff ``` 生成效果 graph LR s[开始]:::ownstyle-->e[结束] classDef ownstyle fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff 方式3 css class形式添加样式

定义

.cssClass > rect{ fill:red; stroke:#FFFF00; stroke-width:4px; }

实例：源代码

```mermaid graph LR; A-->B[AAABBB]; B-->D; class A cssClass; ```

生成效果：

graph LR; A-->B[AAABBB]; B-->D; class A cssClass; Mermaid - 时序图（序列图）时序图又名序列图是UML交互图的一种主要用来表示对象之间发送消息的时间顺序基本结构角色 Actor 系统角色可是是人或者其他系统子系统对象 Object 交互过程中扮演的角色一般位于时序图顶部生命线 Lifeline 生命线代表时序图中的对象在一段时期内的存在控制焦点 Activation 控制焦点代表时序图中的对象执行一项活动的时期消息 Message 定义交互和协作中交换信息的类学习流程图的时候还能明白点，到了时序图好像都是没有听过的词汇不要慌张我们还是一边看一遍做就会明白其中的含义可以跳过时序图的创建时序图声明关键字：sequenceDiagram 源代码： ```mermaid sequenceDiagram ``` 生成效果： sequenceDiagram 参与者关键字： participant 基本对象声明：

语法： participant 参与者名称

源代码

``` mermaid sequenceDiagram participant 张三 participant 李四 ```

生成效果：

sequenceDiagram participant 张三 participant 李四对象声明-别名 Aliases ：

语法： participant 别名 as 参与者名称

源代码

``` mermaid sequenceDiagram participant Z as 张三 participant L as 李四 ```

生成效果：

sequenceDiagram participant Z as 张三 participant L as 李四消息 Message

语法：participant1 箭头 participant2：消息内容

源代码：

张三跟李四的对话用不同的连接线来连接

```mermaid sequenceDiagram participant Z as 张三 participant L as 李四 Z->L:我是没有箭头的实线 L-->Z:我是没有箭头的虚线 Z->>L:带箭头的实线 L-->>Z:带箭头的虚线 Z-xL:带x箭头实线 L-)Z:结束时候带箭头的实线 Z--)L:结束时候带箭头的虚线 ```

生成效果：

sequenceDiagram participant Z as 张三 participant L as 李四 Z->L:我是没有箭头的实线 L-->Z:我是没有箭头的虚线 Z->>L:带箭头的实线 L-->>Z:带箭头的虚线 Z-xL:带x箭头实线 L-)Z:结束时候带箭头的实线 Z--)L:结束时候带箭头的虚线

线型对照表

线形含义->无箭头的实线-->没箭头的虚线->>带箭头的实线-->>带箭头的实线-x带x号箭头实线--x结尾x号箭头实线-)结束带箭头的实线--)结束带箭头的虚线控制焦点 Activations 语法： activate participant //激活消息 deactivate participant //释放激活

这个有一些抽象我们用一个场景来去理解

场景1：

张三：hi李四你还好么 // 李四听了开始回话此时李四是激活状态开始进行对话李四：hi张三我可以听到你，我很好，不用担心。 //李四会话结束不会再跟张三有活动此时李四的激活状态被释放源代码： ```mermaid sequenceDiagram participant Z as 张三 participant L as 李四 Z->>L:hi李四你还好么 activate L L->>Z:hi张三我可以听到你，我很好，不用担心。 deactivate L ``` 生成效果： sequenceDiagram participant Z as 张三 participant L as 李四 Z->>L:hi李四你还好么 activate L L->>Z:hi张三我可以听到你，我很好，不用担心。 deactivate L

场景2：

张三：hi李四你还好么张三：你可以听到我说话么 //李四开始回话被激活李四：hi张三我可以听到你李四：不用担心我源代码： ```mermaid sequenceDiagram participant Z as 张三 participant L as 李四 Z->>L:hi李四你还好么 activate L Z->>L:你可以听到我说话么 activate L L->>Z:hi张三我可以听到你 deactivate L L->>Z:我很好，不用担心。 deactivate L ``` 生成效果： sequenceDiagram participant Z as 张三 participant L as 李四 Z->>L:hi李四你还好么 activate L Z->>L:你可以听到我说话么 activate L L->>Z:hi张三我可以听到你 deactivate L L->>Z:我很好，不用担心。 deactivate L 时序图-批注 Note 语法：

单个对象：

Note 位置 of participant:批注内容

对个对象：

Note 位置角色名称1，角色名称2:批注内容

位于对象左侧：源代码 ```mermaid sequenceDiagram participant 张三 Note left of 张三 :我是张三 ``` 生成效果 sequenceDiagram participant 张三 Note left of 张三 :我是张三位于对象右侧：源代码 ```mermaid sequenceDiagram participant 张三 Note right of 张三 :我是张三 ``` 生成效果 sequenceDiagram participant 张三 Note right of 张三 :我是张三位于对象上方（需要两个对象）：源代码 ```mermaid sequenceDiagram participant 张三 participant 李四 Note over of 张三&李四 :我是张三 ``` 生成效果 sequenceDiagram participant 张三 participant 李四张三->>李四:李四你好么 Note over 张三,李四 :他们正在沟通时序图-逻辑循环 Loop

交互过程中表示某些循环的环节

语法：

loop 循环描述循环内容 end //结束标记

场景：李四跟张三是好朋友李四生病了张三很关心他每过一小时为了不让张三如此担心李四就约定每一个小时给张三发消息

源代码：

```mermaid sequenceDiagram participant 张三 participant 李四张三->>李四:李四你好么 loop 每过一小时李四发消息给张三李四 --> 张三:我很好 end ```

生成效果：

sequenceDiagram participant 张三 participant 李四张三->>李四:李四你好么 loop 每过一小时李四发消息给张三李四 --> 张三:我很好 end 时序图抉择（Alt）&选项（Opt）

组合片段用来解决交互执行的条件及方式。它允许在序列图中直接表示逻辑组件，用于通过指定条件或子进程的应用区域，为任何生命线的任何部分定义特殊条件和子进程。

Alt 抉择

用来指明在两个或更多的消息序列之间的互斥的选择，相当于经典的if..else.. 只能发生一种情况

语法： alt 第一种情况描述具体发生的动作 else 剩余情况描述具体发生的动作 end 场景：场景:张三：李四你还好么如果李四生病了他会说：我不是很好如果李四很健康他会说：我很好又是很好的一天源代码： ```mermaid sequenceDiagram participant 张三 participant 李四张三 ->>李四:你生病了么 alt 第一种情况描述李四-->>张三:是的，我很难受 else 剩余情况描述李四-->>张三:我没生病，挺好的 end ``` 生成效果： sequenceDiagram participant 张三 participant 李四张三 ->>李四:你生病了么 alt 第一种情况描述李四-->>张三:是的，我很难受 else 剩余情况描述李四-->>张三:我没生病，挺好的 end opt 选择"

包含一个可能发生或不发生的序列就是一种场景有可能发生也有可能不发生

语法：

opt 情况描述有可能发生的动作 end

场景：

场景:张三：李四你还好么李四会可能会说谢谢你的问候也可能不会说这个并无法预测源代码： ```mermaid sequenceDiagram participant 张三 participant 李四张三 ->>李四:你还好么 opt 可能的回答李四-->>张三:谢谢你的问候 end ``` 生成效果： sequenceDiagram participant 张三 participant 李四张三 ->>李四:你还好么 opt 可能的回答李四-->>张三:谢谢你的问候 end 时序图并行关系 par

并行处理。一个对象同时发出的交互动作

基本语法： par 动作描述1 participant1 ->> participant2: 内容 and 动作描述2 participant1 ->> participant3: 内容 end 场景： participants: 张三李四王五张三在下午5点分别给李四和王五分一条信息：内容是吃了么李四回复：吃了张三回复：没吃源代码 ```mermaid sequenceDiagram autonumber participant 张三 participant 李四 participant 王五 par [给李四发消息] 张三 ->> 李四: 吃了么 and [王五发送消息] 张三 ->> 王五: 吃了么 end 李四 ->> 张三:没吃呢王五 ->> 张三:吃了 ``` 生成效果 sequenceDiagram autonumber participant 张三 participant 李四 participant 王五 par [给李四发消息] 张三 ->> 李四: 吃了么 and [王五发送消息] 张三 ->> 王五: 吃了么 end 李四 ->> 张三:没吃呢王五 ->> 张三:吃了嵌套语法： par 动作描述1 participant1 ->> participant2: 内容 and 动作描述2 participant1 ->> participant3: 内容 end par 动作描述1 participant3 ->> participant4:内容 and 王五发消息给A8 participant3 ->> participant5:内容 end 场景： participants: 张三李四王五赵六 A8 王五明天请吃饭张三发消息问李四明天去不去同时发消息给王五问明天都有哪些人参加王五发消息给赵六:明天一起吃饭8 同事也发消息给A8告诉他让他带着小伙伴一起源代码 ```mermaid sequenceDiagram participant 张三 participant 李四 participant 王五 participant 张三 participant 赵六 participant A8 par 张三发消息给李四张三 -->> 李四:明天王5请客吃饭 and 张三发消息给王五张三 -->> 王五: 明天吃饭都有谁呢 end par 王五发消息给赵六王五->>赵六:明天准时到场哈 and 王五发消息给A8 王五 ->>A8:明天带上你的伙伴一起来哈 end ``` 生成效果 sequenceDiagram participant 张三 participant 李四 participant 王五 participant 张三 participant 赵六 participant A8 par 张三发消息给李四张三 -->> 李四:明天王5请客吃饭 and 张三发消息给王五张三 -->> 王五: 明天吃饭都有谁呢 end par 王五发消息给赵六王五->>赵六:明天准时到场哈 and 王五发消息给A8 王五 ->>A8:明天带上你的伙伴一起来哈 end 背景高亮

语法：

rect rgba(0,213,123)

源代码：

```mermaid sequenceDiagram participant 张三 participant 李四 participant 王五 participant 张三 participant 赵六 participant A8 par 张三发消息给李四 rect rgba(0,113,133) 张三 -->> 李四:明天王5请客吃饭 end and 张三发消息给王五 rect rgba(0,113,133) 张三 -->> 王五: 明天吃饭都有谁呢 end end par 王五发消息给赵六 rect rgba(0,213,123) 王五->>赵六:明天准时到场哈 end and 王五发消息给A8 rect rgba(0,213,123) 王五 ->>A8:明天带上你的伙伴一起来哈 end end ```

生成效果：

sequenceDiagram participant 张三 participant 李四 participant 王五 participant 张三 participant 赵六 participant A8 par 张三发消息给李四 rect rgba(0,113,133) 张三 -->> 李四:明天王5请客吃饭 end and 张三发消息给王五 rect rgba(0,113,133) 张三 -->> 王五: 明天吃饭都有谁呢 end end par 王五发消息给赵六 rect rgba(0,213,123) 王五->>赵六:明天准时到场哈 end and 王五发消息给A8 rect rgba(0,213,123) 王五 ->>A8:明天带上你的伙伴一起来哈 end end

【本文地址】

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

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

今日新闻

推荐新闻