![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Mermaid 学习
Alyeska
蓝毒的狗
展开
-
画图工具Mermaid学习笔记——饼图、象限图
x-axis <left text> --> <right text> (也可只放左侧文本)y-axis <bottom text> --> <top text> (也可只放下侧文本)pie showdata(可选,是否在表头后显示实际数组) title (可选,加标题) (xxxx)quandrant 1 xxxx (置于象限1的文本,象限234同理)部分参数调整:在前面插入如下代码可设置百分比标注文字离圆心的位置、饼图外圈的线条粗细。(以下均省略在md中需要的"""mermaid"""前后缀)原创 2024-08-13 10:46:06 · 365 阅读 · 0 评论 -
画图工具Mermaid学习笔记——流程图3
预设置CSS样式,如以下的CSS,作用是选中所有名为 cssClass 下的元素的rect元素,应用填充颜色,描边颜色和描边宽度的指定。后续可用类似 class A cssClass 对A调用(但实际没有效果,不知道为什么)命名为 default 的 class 将对所有没有另外单独指定的进行应用。(以下均省略在md中需要的"""mermaid"""前后缀)使用来自 Font Awesome 的扩展:(使用 fa:#icon 的格式调用特殊图标。原创 2024-08-13 09:45:43 · 133 阅读 · 0 评论 -
画图工具Mermaid学习笔记——流程图2
若子图中的某个节点与外界的节点连接了,则子图规定的自身方向将失效,而是遵循母图的方向。设置连接曲线的风格:在该语句 'stepbefore' 处使用不同的参数即可((以下均省略在md中需要的```mermaid ```前后缀)设置子图,子图间同样可以用名字进行连接,或在子图中包含子图。特殊字符串:用双星号使用粗体,单星号使用斜体,直接换行。设置连接的样式:如下设置了第四条连接的颜色和宽度。原创 2024-08-09 20:12:40 · 295 阅读 · 0 评论 -
画图工具Mermaid学习笔记——流程图1
与其他有连接的节点名开头有字幕 o 或 x 时,需大写或在前面加一空格(如 A--- oB/A---OB)用以和圆边、叉边区分(见后文)LR:从左指向右 TD/TB:从上指向下 RL、BT同理。(以下均省略在md中需要的```mermaid ```前后缀)显示文字中使用外嵌双引号和撇号加入markdown 语法文字。流程图由节点(node)和边(edge)组成。单个节点及显示文字(若无文字则显示节点名)规定节点外框形状:以下展示了目前可用的种类。节点间连接方式:以下只摘录主要的一部分。原创 2024-08-01 15:43:56 · 284 阅读 · 0 评论 -
画图工具 Mermaid 学习笔记——概述
此图为安装了 Mermaid Markdown Syntax Highlight 扩展(语法高亮区分)后的演示。VS Code 插件:(其他环境对应插件同样在官方文档有给出)Mermaid,一款基于markdown语法的图表绘制工具。原创 2024-08-01 10:34:58 · 138 阅读 · 0 评论