不要著急,最好的總會在最不經意的時候出現。
Don't worry, the best will always appear in the most casual time.
心配しないで、最高のものが常に最もカジュアルな時間に表示されます。
Ne vous inquiétez pas, le meilleur apparaîtra toujours au moment le plus décontracté.
걱정하지 마십시오. 최고는 항상 가장 우연한 시간에 나타납니다.
Не волнуйтесь, лучшее всегда будет появляться в самое случайное время.

:
Loading...
大纲
prev
next
next
 
 
 
 
VLOOK™
让你的 Markdown 有了新看法
──
脚本化图表参考指南


MAX丨孟兆
COPYRIGHT © 2017-2019. MAX°DESIGN.

VLOOK™<br>让你的 Markdown 有了新看法<br>──<br>脚本化图表参考指南<br><br><br>MAX丨孟兆<br>COPYRIGHT © 2017-2019. MAX°DESIGN.关于 MarkdownMarkdown 是什么?Markdown 语法参考:主推方案mermaid饼图![Q3 2019 中国线上智能手机市场主要品牌市场份额]"数据来自:互联网"![以上「饼图」的画图脚本示例]流程图![流程图]"(以上的「分支流程」内容由下图进行接续)"![分支流程(接续上图)]![以上「流程图」的画图脚本示例]说明状态图标准状态机图环境要求![新版标准状态机图(1)]![以上「状态机图」的画图脚本示例]![新版标准状态机图(2)]![以上「状态机图」的画图脚本示例]旧版状态图说明![旧版状态机图(兼容性较高)]![以上「状态机图」的画图脚本示例]顺序图 / 顺序图 / 泳道图![顺序图 / 顺序图 / 泳道图]![以上「顺序图」的画图脚本示例]说明类图![标准类图(1)]![标准类图(2)]![以上「类图」的画图脚本示例]甘特图![甘特图]![以上「甘特图」的画图脚本示例]备选方案flowchart.js(流程图)JS Sequence Diagrams(顺序图)The End

关于 Markdown

Markdown 是什么?

十四年前,John Gruber 创造了 Markdown,一种专门针对网络写作的文本标记语言。使用 Markdown,你只需在写作过程中插入少量的标记符号,就能很轻松地进行排版(例如设置标题、加粗、列表、引用等)。

Markdown 文档以纯文本格式存储,这意味着,它们可以用几乎任一种文本编辑器打开。同时,又能通过 Markdown 编辑器导出为带排版的富文本文档、HTML 网页等等。纯粹、简洁、易用、灵活,都是人们喜欢 Markdown 的原因。目前 Markdown 的标准化项目是 CommonMark

Markdown 语法参考:

主推方案

mermaid

=推荐方案=

mermaid 是一个用于画流程图、状态图、顺序图、甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。详见 mermaid 官网

饼图

![Q3 2019 中国线上智能手机市场主要品牌市场份额]"数据来自:互联网"
26%20%14%10%9%5%16%Q3 2019 中国线上智能手机市场主要品牌市场份额华为荣耀小米VIVOAppleOPPO其他
![以上「饼图」的画图脚本示例]

流程图

![流程图]"(以上的「分支流程」内容由下图进行接续)"
子图
情况1
情况2
重要分支
流程组节点
普通节点
A
开始
条件判断
结束
分支流程
A
![分支流程(接续上图)]
分支流程
普通节点
结束
![以上「流程图」的画图脚本示例]
说明
  1. 针对流程图及不同图元的应用,重绘为不同的外观、形状;

  2. 特定节点命名规范:

    • START:开始结点
    • END:结束结点
  3. 支持节点形状/类型:

    节点形状应用建议说明
    圆角矩形普通流程节点结合别名(如:node1、page2 等,可自由定义),并通过()指定,举例:node1(普通节点)
    菱形条件判断节点结合别名,并通过{}指定,举例:cond1{条件判断}
    -注意-「条件判断节点」的别名建议统一以cond为前缀
    方角矩形普通流程节点/子流程/状态图不使用别名时的默认样式,也可以通过[]来强制指定,举例:node1[流程组]
    圆形同页标志结合别名,并通过(())指定,举例:node1((圆形节点)
    旗形离页标志结合别名,并通过>]指定,举例:page1>条件判断节点]
    -注意-「离页标志节点」的别名必须以page为前缀,否则样式会与「菱形」条件判断节点冲突
  4. 支持指定流程图方向:LR(从左到右)、RL(从右到左)、TB(从上到下)、BT(从下到上);

  5. 支持 FontAwesome 官网

状态图

标准状态机图

环境要求
![新版标准状态机图(1)]
状态A状态B状态C状态转换说明状态转换说明状态转换说明
![以上「状态机图」的画图脚本示例]
![新版标准状态机图(2)]
状态11在此填写状态的描述内容状态组1【状态组1】右边的备注信息,内容支持换行。状态21状态转换说明状态组2【状态组2】左边的备注信息状态31大写【关闭】大写【打开】按一下 CapLock 键按一下 CapLock 键状态组3状态4
![以上「状态机图」的画图脚本示例]

旧版状态图

说明
  1. 该样式的状态图是借用流程图脚本实现,是mermaid未支持标准状态图时的变通方案;

  2. 针对该类状态图及不同图元的应用,重绘不同的外观、形状;

  3. 特定节点命名规范:

    • INIT:初始状态
    • FINAL:最终状态
  4. 建议使用方角矩形节点来表示状态;

  5. 根据情况适当使用别名(如:A、B、C 等,可自由定义);

  6. 可适当结合菱形节点用于表示分支聚合

![旧版状态机图(兼容性较高)]
初始
复杂变更
变更条件说明
变更条件说明
非正常/次要变更条件说明
非正常/次要变更条件说明
状态A
状态B
状态C
状态D
![以上「状态机图」的画图脚本示例]

顺序图 / 顺序图 / 泳道图

![顺序图 / 顺序图 / 泳道图]
@人物角色系统角色**重要系统角色**--外部系统角色--同步发送消息1同步发送消息1异步发送消息2内部动作显示在外部系统左侧备注说明显示在外部系统右侧备注说明跨对象备注说明发送消息A同步返回消息A1异步返回消息A2alt[ 情景1 ][ 情景2 ]发送消息Xopt[ 可选 ]loop[ 循环组 ]@人物角色系统角色**重要系统角色**--外部系统角色--
![以上「顺序图」的画图脚本示例]
说明
  1. 针对顺序图的不同图元应用,重绘不同的外观、形状;

  2. 针对 opt / alt / loop 标签设置不同的外观、标题位置。

  3. 建议使用实体别名,以提高画图脚本的复用度和可维护性;

  4. 支持三类消息线条:同步请求消息、异步请求消息、返回消息;

  5. 角色在标准的一类样式的基础上,增加三类扩展的样式,在输出HTML后应用 VLOOK™ 插件后渲染为不同的样式:

    • 人物角色:以at符号@开始的内容,如@人物角色
    • 重要系统角色:以等号=进行包裹的内容,如=后端支撑系统名称=
    • 外部系统角色:以减号-进行包裹的内容,如-外部系统名称-
  6. 支持对三类标签分组在输出HTML后应用 VLOOK™ 插件渲染为不同的样式:

    • loop...end:循环
    • opt...end:可选
    • alt..else...end:条件选择(alt = 情景1,else = 情景2)
  7. 支持备注说明。

类图

须mermaid V8.4及更新版本支持。

![标准类图(1)]
«interface»classA+public attribute-private attribute#protected attribute~package attribute+public method()-private method()#protected method()~package method()classB«enumeration»classCREDBLUEGREENWHITEBLACKclassDclassEclassFclassGclassHclassXclassYclassIclassJclassKclassLimplementscompositionassociation*1*1..*Containsmany
![标准类图(2)]
«interface»classA+public attribute-private attribute#protected attribute~package attribute+public method()-private method()#protected method()~package method()classB«enumeration»classCREDBLUEGREENWHITEBLACKclassDclassEclassFclassGclassHclassXclassYclassIclassJclassKclassLimplementscompositionassociation*1*1..*Containsmany
![以上「类图」的画图脚本示例]

 

甘特图

![甘特图]
2014-01-062014-01-072014-01-082014-01-092014-01-102014-01-112014-01-122014-01-132014-01-142014-01-152014-01-16已完成的普通任务执行中的普通任务未来的任务未来的任务2已完成的关键路径任务已完成的关键路径任务2执行中的关键路径任务未来的关键路径任务区块A区块B区块C这里显示甘特图标题
![以上「甘特图」的画图脚本示例]

备选方案

-注意-(从 VLOOK 9.2 版本开始不再支持备选方案)

flowchart.js(流程图)

flowchart.js 基于 SVG 的流程图插件,它仅需几行代码即可在 Web 上完成流程图的构建。可以从文字表述中画出简单的 SVG 流程图,也可以画出彩色的图表。详见 flowchart.js 官网

JS Sequence Diagrams(顺序图)

JS sequence diagrams 是一个方便建立 UML 的顺序图(序列图 or 循序图)在线工具,使用简单。详见 JS Sequence Diagrams 官网

The End