首页  

编程式绘图工具mermaid     所属分类 mermaid 浏览量 66
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弹性分布式数据集