Created
Aug 14, 2024 01:43 PM
Favorite
Favorite
Priority
备注
推荐
类型
✿ 编辑 | 排版 | 制图 | 测试 | 发表
✿ ✍未经允许，谢绝转载！
✿ 来源：Kuzens
最近在整理笔记, 发现一些笔记如果是单纯的笔记, 很难直观理解笔记内部的流程, 但是如果通过其他软件或者 obsidian 自带的白板功能来回切换是一个问题, 笔记链接又是一个问题, 如果用图片的话, 流程图发生更改又是一个问题. 所幸 obsidian 支持 Mermaid 这样笔记和流程图.
1. Mermaid 简单介绍
Mermaid 允许您使用文本和代码创建图表和可视化效果。它是一个基于 JavaScript 的图表和图表工具，可呈现受 Markdown 启发的文本定义，以动态创建和修改图表。Mermaid 支持流程图、思维导图、状态图、甘特图等大多数图标样式, 并且可以和 dataview 联动做成动态图标. 并且编写方式有多如下面的俩种编写方式在 Mermaid 的显示是一样, 建议第一种, 编写起来清晰易懂
第一种
第二种
2. Mermaid 简单编写 (符号全部为英文状态下编写)
第一步:写个代码框然后代码框第一行后面写上Mermaid 这个时候这个代码框就变成了 mermaid 图(所有的字母都要小写), 如果这个时候你的光标移开代码框, 就会报错因为你的 mermaid 什么都没有
第二步: 选择 Mermaid 的图标样式和方向这里选用 graph 和 TD (竖向排列, 默认为 LR 从左到右)
第三步: 定义节点通常为‘A[节点名称]’、‘B[节点名称]’(字母为替代名称、中括号内为显示名称)
第四步: 用'-->'将节点连起来
第五步: 在'-->'添加 '|路径文字|' (这个时候 Mermaid 的流程图已经基本完成了)
第六步: 添加 Mermaid 的标题, 回到第一行添加俩行 '---' 里面包裹一个 title: 标题
完成后的代码如下
效果如下
3. Mermaid 简单优化
节点优化: 目前测试可以得出可以修改风格呦:字体颜色、边框颜色、边框风格、透明度、圆角
在代码框内末尾添加下面这句代码. 可以发现节点A 变成了一个亮黄色背景、白色边框、较粗的边框线、圆角矩形形状，以及微透明的效果。(欢迎补充)
连接线优化:
位置优化: 在 obsidian 中 Mermaid 的图默认是靠左的如果想居中显示只需要添加一个 css 文件在文件中写入下面的代码即可将 Mermaid 居中显示
如果您对本期内容有不同的看法或者疑问,请在文末留言
也欢迎您进入Kuzen的吹水群和大家一起吹水进步
相关推荐
您的在看/赞赏/分享,是对小编最大的鼓励