文章详情|编程式绘图工具mermaid

编程式绘图工具mermaid 所属分类 mermaid 浏览量 978

Mermaid lets you create diagrams and visualizations using text and code.

It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

用于画流程图 状态图 时序图 甘特图 ，使用 JS 进行本地渲染
广泛集成于许多 Markdown 编辑器中


Four ways of using mermaid:
Using the mermaid Live Editor.
Using mermaid plugins with programs you are familiar with.
Calling the Mermaid Javascript API.
Deploying Mermaid as a dependency.

使用 Javascript 渲染生成图形


<html>
  <title>mermaid demos</title>
  <body>
    <script src="./mermaid.min.js"></script>
    <script>mermaid.initialize({startOnLoad:true});</script>

    Here is one mermaid diagram:
    <div class="mermaid">
      graph TD
      A[Client] --> B[Load Balancer]
      B --> C[Server1]
      B --> D[Server2]
    </div>
    
    <hr>

    And here is another:
    <div class="mermaid">
      graph TD
      A[Client] -->|tcp_123| B(Load Balancer)
      B -->|tcp_456| C[Server1]
      B -->|tcp_456| D[Server2]
    </div>
    
    <hr>
    
    
    <div class="mermaid">
      graph TD
      A-->B
      A-->C
      B-->D
      C-->D
    </div>
</html>


更多例子
https://gitee.com/dyyx/hellocode/raw/master/web/tech/mermaid/demos.html



图表方向
TB  从上到下
BT  从下到上
RL  从右到左
LR  从左到右

节点
id[文字]  矩形节点
id(文字)  圆角矩形节点
id((文字))    圆形节点
id>文字]  右向旗帜状节点
id{文字}  菱形节点

节点间连线
>   添加尾部箭头
-   不添加尾部箭头
--  单线
--text--    单线上加文字
==  粗线
==text==    粗线加文字
-.- 虚线
-.text.-    虚线加文字

子图表
subgraph 子图表名称
    子图表中的描述语句...
end

序列图
sequenceDiagram

消息线
|类型|描述|
|->|无箭头的实线|
|-->|无箭头的虚线|
|->>|有箭头的实线|
|-->>|有箭头的虚线|
|-x|末端为叉的实线（表示异步）|
|--x|末端为叉的虚线（表示异步）|



PlantUML 是服务端生成图片后返回


 plantUML安装使用

权益类固收类现金类资产区别

Spark大数据分析实战第1章 Scala基础

指数估值工具

Spark大数据分析实战第2章初识Spark

Spark Standalone 的两种提交方式

Spark大数据分析实战第3章 RDD弹性分布式数据集