注水：mermaid 学习笔记

cheukyin 发布于2019-08-21 18:22 / 1459人阅读

摘要：学习笔记是一个库。通过设计一些语法规则，实现将符合该语法的语句转化成相应的说明图，例如流程图通讯图和甘特图。不过我目前的主要目的是用它在一个的文本编辑器中辅助做笔记，内置这个库，故暂时忽略其的使用。

mermaid 学习笔记 mermaid

mermaid 是一个 JS 库。

Generation of diagram and flowchart from text in a similar manner as markdown

通过设计一些语法规则，实现将符合该语法的语句转化成相应的说明图，例如流程图、通讯图和甘特图。

盗其 git-book 的图，如下

一篇文章中，通过文字的大小，是否加粗，是否为斜体，来表现相应内容在整篇文章中的层次，结构以及重要与否。Markdown 就通过定义好一系列的标示，对应着文字不同的样式，从而使作者将更多精力放在内容上，而不是文字的样式上。例如

# 代表文章标题

## 代表大标题

### 代表中标题

#### 代表小标题

mermaid 和 Markdown 类似，其通过定义了一系列规则，符合这些规则的语句，最后会呈现为相应的说明图。

同时 mermaid 作为一个 JS 库，它有一系列的 API ，例如 init() 等。不过我目前的主要目的是用它在 typora（一个 Markdown 的文本编辑器）中辅助做笔记， typora 内置这个 JS 库，故暂时忽略其 API 的使用。

绘制流程图

声明进行流程图绘制的语法是：

graph TB

其中 graph 代表后面的内容表达的是一个流程图， TB 代表的是流向，流向有四种

TB 意味着 Top-bottom

BT 意味着 Bottom-top

RL 意味着 Right-left

LR 意味着 Left-right

绘制一个包含开始，过程和结束的流程图的语法如下

graph TB
    start[开始]-->process[过程]
    process-->end[结束]

from[源节点的样式]-->to[目的节点的样式]

在一次信息流的传递过程中，有以下几个参数可选

源节点的内容

源节点的样式，不同的样式，代表不用的含义，例如用菱形代表条件选择（if-else）

传递的方式

目的节点的内容

目的节点的样式

其中源节点的内容就是框中所要表现的文字，而源节点的样式就是只包裹文字的框的样式，有默认的方形方框、圆角方框、圆、不对称方框以及菱形，用说明图表示如下

对应源码

graph LR
    C[节点的样式]
    C-->F1[默认方框]
    C-->F2(圆角方框)
    C-->F3((圆形节点))
    C-->F4>不对称节点]
    C-->F5{菱形节点}

传递的方式用流程图表示如下：

对应源码如下

graph LR
    subgraph 例子
    B-->B1[箭头]
    C---C1[无箭头]
    D-->|文字|D1[文字]
    E-.->E1[虚线]
    F==>F1[粗线]
    end
    subgraph 传递的方式
    A[分类]
    A-->A1[有无箭头]
    A-->A2[有无文字]
    A-->A3[线的形状]
    end

云服务器服务器托管学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90392.html

STM32F4+ESP8266拟辉光钟设计（一）简介及时间获取

摘要：在搜索了一些资料后我把我的工作分成了两个部分第一个部分就是时间的获取第二个部分是灯光的控制。模块联网的方式是通过其与分别与串口的端和端相连通过串口通信发送指令来控制实现联网。通过了解我发现可以通过芯片内部的时钟来实现时间的自走功能。 ...

番茄西红柿 2021-11-25 09:43 评论0 收藏2637
Markdown编辑器

摘要：当你完成了一篇文章的写作在上方工具栏找到文章导出，生成一个文件或者文件进行本地保存。导入如果你想加载一篇你写过的文件或者文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，继续你的创作。 @TOC 欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Mark...

mykurisu 2019-06-28 10:33 评论0 收藏0
写一个 JS 调用栈可视化工具 hound-trace

摘要：背景最近在分析一些框架源码，在写笔记的时候，一些函数的调用栈希望用流程图的形式记录下来，打开就是一顿操作，画了几个调用栈之后，感觉很麻烦。背景最近在分析一些框架源码，在写笔记的时候，一些函数的调用栈希望用流程图的形式记录下来，打开 http://draw.io 就是一顿操作，画了几个调用栈之后，感觉很麻烦。于是蹲在厕所里的我开始思考了，调用栈既然可以用 console.trace(...

solocoder 2019-08-26 10:48 评论0 收藏0