js 流程图插件_Typora笔记之绘制流程图详述（二）

最新推荐文章于 2024-09-21 13:15:02 发布

weixin_39658318

最新推荐文章于 2024-09-21 13:15:02 发布

阅读量1.3k

点赞数

文章标签： js 流程图插件 js流程图插件 mfc 橡皮筋类绘制矩形使用vue加svg实现流程图代码请画出与上述代码对应的程序流程图;

本文详细介绍了如何使用Typora编辑器配合Mermaid插件绘制流程图，包括Mermaid的原理、使用方法、DSL语法及示例。Mermaid是一款免费开源的图形DSL和SVG渲染器，支持多种图表类型。通过Mermaid代码，可以轻松在Typora中生成流程图、序列图等。文章提供了一个包含多种语法细节的典型样例，帮助读者掌握Mermaid流程图的绘制技巧。

摘要由CSDN通过智能技术生成

前言

之前已经发布了两篇Typora代码绘图的文章，如下：

1、Typora笔记之绘图综述

2、Typora笔记之绘制流程图详述(一)

本文接着对Typora通过mermaid插件实现代码绘制流程图进行详细介绍，希望能对感兴趣的朋友有所帮助。

本次分享的内容目录如下：

前言

1. Typora绘制流程图简介

2. mermaid简介

3. Typora利用mermaid插件绘制流程图典型样例

4. mermaid插件DSL语法及说明

结束语

参考资料

1. Typora绘制流程图简介

1.1 Typora代码绘图原理

Typora代码绘图的实现原理：

(1)用某种 DSL 描述想要画的图；

(2)调用扩展程序(解析、渲染器)对DSL进行解析并渲染后动态生成相应图。

注：DSL (Domain Specific Language，特定领域语言)是为了解决某些特定场景下的任务而专门设计的语言。

1.2 Typora代码绘制流程图实现方式

Typora代码绘制流程图可以采用flowchart.js插件或mermaid插件两种方式实现。这两种方式的对比如下表所示：

Typora通过flowchart.js插件实现代码绘制流程图已经在上一篇文章中详细介绍了，本文只详细介绍Typora通过mermaid插件实现代码绘制流程图。

2. mermaid介绍

mermaid是一款免费开源的，能在浏览器和终端中运行的特定类型图DSL和SVG渲染器，可以通过DSL(图的文本表示)来绘制简单的SVG图。当前版本的mermaid已经支持多种特定类型图，包括：流程图(Flow Chart)、序列图(Sequence Diagram)、类图(Class Diagram))、状态图(State Diagram)、实体关系图(Entity Relationship Diagram)、用户旅程图(User Journey Diagram)、甘特图(Gantt Diagram)、饼图(Pie Chart)、Git图(Git Graph)等。

使用mermaid通过代码绘制图非常简单，原理是将mermaid代码(Plain Text)通过渲染器(Mermaid JavaScript Library)来转化成图(Graphs, Gantt Charts, and many other Diagrams)并显示。

注：Mermaid被提名并获得了2019年度“最令人兴奋的技术应用”类别的JS开源奖。

目前使用mermaid实现代码绘图有以下三种方法：

(一)使用mermaid Live Editor：(网址：https://mermaid-js.github.io/mermaid-live-editor/)

如下图示，在左上侧的Code区编辑修改mermaid代码，右侧的Preview区就会实时显示出经渲染后的图；在右下侧，还能将渲染后的图直接下载成png格式的图片等。

(二)用HTML调用mermaid渲染器

大多数网络浏览器(例如Firefox，Chrome和Safari)都可以渲染mermaid，所以可以直接在html文件中添加mermaid代码，这样在打开html文件时浏览器就会直接完成mermaid的渲染工作，显示出相应图。

示例代码(MermaidHtmlTest.html)：

浏览器打开html文件看到的效果：

(三)使用mermaid插件

由于mermaid的日益普及，已经存在许多包含mermaid渲染器的插件，比如编辑器插件就支持：Visual Studio Code、Sublime Text 3、Vim、Atom、Typora等。

本文就是此类应用场景，依托Typora上的mermaid插件实现代码绘制多种特定类型图。下面就进一步来进行详细介绍。

3. Typora利用mermaid插件绘制流程图典型样例

为了给大家更好的阅读体验，本文尝试先展示一个典型样例，然后再进行语法介绍。

该典型样例是我精心给大家准备的，里面融合了mermaid插件流程图各语法细节，包括：如何定义流程图(含布局方向)、如何定义节点(含节点标识、节点文本、节点类型)、如何定义节点连线(含连线序号、连线样式、连线标注、连线曲线样式)、如何定义子图(含嵌套子图)、如何自定义和应用节点样式和类、如何绑定节点点击事件、如何定义注释等。相信只要能把这个典型样例看懂了，那么你就算真正掌握了在Typora上利用mermaid插件绘制流程图，进而可以根据自己的需要来绘制所需要的流程图啦！

先来看下mermaid插件流程图典型样例效果(如下)，是不是感觉还不错。