用Markdown写UML (统一建模语言) 框图

用简单文本写UML框图

• GitHub源代码管理友好
• 基本免费
• 写清楚软件架构（类图、交互图、流程图…)
  UML= Unified Modeling Language (统一建模语音)

工具

• 编辑器：Typora, (https://typora.io/ 下载安装)
• 天然内嵌工具
  • 交互图 (Interaction diagram): sequence
  • 活动图(Activity diagram): mermaid>>flowchart (graph)
  • 类图(Class diagram): mermaid>>classDiagram

说明

Typora是及其轻量的编辑器，现在是免费的beta版本，正式版可能会收钱。安装完了就可以内嵌各种框图。

sequence框图来自一个开源Javascript项目: js-sequence-diagrams
https://bramp.github.io/js-sequence-diagrams/

mermaid工具也是一个开源项目：mermaid，获得js open source award 2019
https://mermaidjs.github.io/
有人做了个网页版，直接就是编辑器和预览器，如此轻量，叹为观止
https://mermaid-js.github.io/mermaid-live-editor/

背景故事：https://www.linux-magazine.com/Issues/2018/212/Mermaid

CSDN好像不支持sequence， 打sequence自动启用mermaid sequence, 功能类似，但是框框大小和回车我不太会调整，没用，下面暂时部分借用mermaid范例演示一下：

说明链接

• 用Typora写框图，文档里面有链接到各种语法
  http://support.typora.io/Draw-Diagrams-With-Markdown/
• Mermaid框图全面说明， 注意部分在Typora里面不支持
  https://mermaid-js.github.io/mermaid/#/README
• 在线画 Mermaid框图，甚至可以下载到本地离线画
  https://mermaid-js.github.io/mermaid-live-editor/
• Flowchart范例帖子，在Typora也有效
  链接
• UML说明
  https://www.tutorialspoint.com/uml/uml_activity_diagram.htm

评论

在Typora里面

• 活动图(流程图) 用 mermaid比较好，颜色比较和谐；flow箭头太长，图太大
• 互动图 用 sequence比较好，mermaid对长文字排列不好产生重叠，颜色好看也没有用
  由于Typora用的mermaid版本比较老旧，以上观点在其他编辑器可能不同。另外应该有高级属性调节mermaid，没找到说明。