流程图js教程--Javascript图表工具

Mermaid js 是一个开源的javascript框架，用于从基于markdown的文本内容生成图表。
定义markdown 文本内容的语法与markdown文本类似。这个项目使用 D3 和 dagre-d3 库来进行图形布局和绘制。
例如，你把流程定义为markdown，如下例子
graph TD;
    Error-->Yes;
    Error-->No;
    Yes-->Fail;
    No-->Success;
它也有一个在线编辑器，你在那里做设计图和测试图。
这个库可以使用javascript生成以下图表:
Mermaid JS的优势
开源的简单工具
不需要任何商业工具来生成流程图和顺序图的工具。
产生基本图的简单工具
在线编辑器可以测试文本内容。
输出为PNG和SVG
易于修改和重新生成图表和图示
安装和设置
这个库作为javascript/jquery和基于节点的应用程序使用

使用CDN
在HTML的脚本标签中包含CDN URL，如下所示

使用配置对象初始化美人鱼对象
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.13.4/mermaid.min.js"></script>  
<script>mermaid.initialize({startOnLoad:true});</script>  
NodeJS npm
你可以使用npm或yarn库来安装mermaid库。
yarn add mermaid  
npm install -g mermaid  
它在你的nodejs应用程序中安装依赖性。
mermaid API的使用
它在客户端应用程序中使用，在网页上加载它。这些调用渲染功能，解析文本语法，生成图表并输出到SVN元素 在HTML中，我们将写出这样的HTML标签和class="mermaid"
<script>mermaid.initialize({startOnLoad:true});</script>  
<div class="mermaid">  
</div>  
流程图示例
下面的代码片段生成了一个简单的流程图。
  <!doctype html>  
<html lang="en">  
      <title>Mermaind Javascript Flow chart Example</title>  
      <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.13.4/mermaid.min.js"></script>  
      <script>mermaid.initialize({startOnLoad:true});</script>  
   </head>  
      <div class="mermaid">  
         graph TD  
         A[Start] --> C{Answer Question?}  
         C -->|Yes| D[Do Something]  
         C -->|No| E[Do Something]  
      </div>  
   </body>  
</html>  
请看这个代码的输出，如截图所示
Mermaid CLI使用方法
Mermaid也可以使用CLI工具从命令行中调用。
它是一个命令行界面工具，以mmd扩展文件作为输入，并输出为SVG、png和PDF格式。 mmd是一个mermaid定义文件，包含文本markdown语法格式的内容。它有各种选项可以配置，高度，背景颜色和CSS样式。

安装CLI- 使用npm命令，这将在全局范围内安装工具。
yarn global add @mermaid-js/mermaid-cli  
npm install -g @mermaid-js/mermaid-cli
这个cli提供了mmdc命令行选项。你可以按以下方式检查用法和选项
B:\Workspace\blog\mermaid>mmdc -h  
  Usage: index.bundle [options]  
  Options:  
    -V, --version                                   output the version number  
    -t, --theme [theme]                             Theme of the chart, could be default, forest, dark or neutral. Optional. Default: default (default: default)  
    -w, --width [width]                             Width of the page. Optional. Default: 800 (default: 800)  
    -H, --height [height]                           Height of the page. Optional. Default: 600 (default: 600)  
    -i, --input                              Input mermaid file. Required.  
    -o, --output [output]                           Output file. It should be either svg, png or pdf. Optional. Default: input + ".svg"  
    -b, --backgroundColor [backgroundColor]         Background color. Example: transparent, red, '#F0F0F0'. Optional. Default: white  
    -c, --configFile [configFile]                   JSON configuration file for mermaid. Optional  
    -C, --cssFile [cssFile]                         CSS file for the page. Optional  
    -p --puppeteerConfigFile [puppeteerConfigFile]  JSON configuration file for puppeteer. Optional  
    -h, --help                                      output usage information  
导出到PDF/PNG/SVG的例子
这是一个从文本中生成序列图并将其转换为png文件并下载的例子。使用一个接受文本文件并生成png文件的mmdc工具。
mmdc -i sequence.mmd  -o sequence.png -w 1024 -H 768  
你也要为生成的png文件提供宽度和高度的配置。sequence.mmd文件包含以下markdown文本语法
sequenceDiagram  
Browser->> Server: send request   
Server->> Database: get records  
Note right of Database: Records Processed.  
Database->> Server: returns records  
Server->> Browser: returned response to browser  
生成的序列图如下所示
这是一个在线编辑器工具，用于编辑/预览/下载美人鱼的流程图和图表。
这对编码美人鱼定义文件和测试及预览图表流程非常有用。这将帮助开发人员节省时间，并在出现任何问题时进行调试。
这也有各种选项，如为生成的图表生成链接并与他人分享，其他人也可以编辑代码并查看图表。你也可以将生成的流程下载为SVG文件。