ioDraw代码绘制流程图工具

Code Chart介绍

Code Chart是一个基于 Javascript 的图表和图表工具，它基于 markdown 语法来简化和加速生成流程图的过程，也不止于生成流程图。

工具地址：ioDraw.com

图形

头部用graph
或flowchart
关键字来声明流程图。两者用法基本一致，使用graph
声明时，链接线上的文字会附带白底；使用flowchart
声明时，连接线更平滑，并且似乎可以支持更新的语法。更多区别详见源码，以下内容不加区分地使用两种声明方式。

graph TD  A[Christmas] -->|Get money| B(Go shopping)  B --> C{Let me think}  C -->|One| D[Laptop]  C -->|Two| E[iPhone]  C -->|Three| F[fa:fa-car Car]
graph TD  A[Christmas] -->|Get money| B(Go shopping)  B --> C{Let me think}  C -->|One| D[Laptop]  C -->|Two| E[iPhone]  C -->|Three| F[fa:fa-car Car]

一个节点（默认）

graph LR id

带有文字的节点

graph LRid[文字]

流程图方向

graph TBstart --> stop

graph LRstart --> stop

节点样式

矩形

id[text]

圆角矩形

id(text)

体育场形

id([text])

子程序形

id[[text]]

圆柱形

id[(text)]

圆形

id((text))

不对称矩形

id>text]

菱形

id{text}

六边形

id{{text}}

平行四边形

id1[/text/]id2[\text\]

梯形

id[/text\]

含特殊字符

含有()
[]
{}
等特殊字符时，可用双引号""
包裹处理。

id["[特殊字符]"]

小结

节点之间的连接

连接线样式

a---ba-.-ba===b

箭头样式

a --> ba --ob a --x ba <--> ba o--o b

连接上的文本

a-->|text|b

连接长度

a1---a2b1----b2a---->b

小结

链式连接

a --- b1 & b2--- c
a1 & a2 --- b1 & b2 & b3

示例

graph TD    A[Start] --> B{Is it?} -->|Yes| C[OK];    C --> D[Rethink];    D --> B;    B ---->|No| E[End];

节点上的超链接

可以将单击事件绑定到节点，单击可以使 javascript 回调或将在新浏览器选项卡中打开链接。

graph LR;    A-->B;    B-->C;    click A "http://www.github.com" _blank    click B "http://www.github.com" "Open this in a new tab" _blank

typora对Interaction
支持有限，更多内容可以查看mermaid官方文档。

子图

graph TB    subgraph one    a1-->a2        subgraph subone        a11-->a21        end    end    subgraph two    b1-->b2    end    subgraph three    c1-->c2    end    c1-->a2    one-->two

测试功能：子图连接

当图像类型选择flowchart
时，可以设置子图之间的边的连接。

注：在当前版本，此处仅支持使用flowchart
声明。

%% Bata:With the graphtype flowcharts it is also     possible to set edges to and from subgraphs as in the flowchart below.flowchart TB        c1-->a2    subgraph one    a1-->a2    end    subgraph two    b1-->b2    end    subgraph three    c1-->c2    end    one --> two    three --> two    two --> c2

子图的方向

当前版本暂不支持

flowchart LR  subgraph TOP    direction TB    subgraph B1        direction RL        i1 -->f1    end    subgraph B2        direction BT        i2 -->f2    end  end  A --> TOP --> B  B1 --> B2

注释

注释以%%
开头并且独占一行

graph LR%% this is a comment A -- text --> B{node}   A -- text --> B -- text2 --> C

节点样式

可以对节点应用特定样式，例如较粗的边框或不同的背景颜色。

graph LR    id1(Start)-->id2(Stop)    style id1 fill:#f9f,stroke:#333,stroke-width:4px    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

更多样式参考ioDraw官方文档。

举报/反馈

原网址: 访问
创建于: 2023-03-07 16:56:05
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论