Markdown中使用plantuml的探索

问题

由于我经常使用Typora写文档,文档中经常需要插入uml图。
这样操作起来并不方便,能否直接在Typora上画uml图呢?

经过查找之后,发现了一些方法记录一下。

解决方案

http://www.gravizo.com/

这个网站提供了解决方案,但Typora中不是所有方法都支持。

经过测试,使用plantuml格式,可以达到如下效果:

流程图

<img src='https://g.gravizo.com/svg?
@startuml;
(*) --> if "Some Test" then;
  -->[true] "activity 1";
  if "" then;
    -> "activity 3" as a3;
  else;
    if "Other test" then;
      -left-> "activity 5";
    else;
      --> "activity 6";
    endif;
  endif;
else;
  ->[false] "activity 2";
endif;
a3 --> if "last test" then;
  --> "activity 7";
else;
  -> "activity 8";
endif;
@enduml
'>

在这里插入图片描述

但是这里 内部的写法和plantuml写法不一致

时序图

<img src='https://g.gravizo.com/svg?
@startuml;
actor User;
participant "First Class" as A;
participant "Second Class" as B;
participant "Last Class" as C;
User -> A: DoWork;
activate A;
A -> B: Create Request;
activate B;
B -> C: DoWork;
activate C;
C --> B: WorkDone;
destroy C;
B --> A: Request Created;
deactivate B;
A --> User: Done;
deactivate A;
@enduml
'>

在这里插入图片描述
但是这里 内部的写法和plantuml写法也不一致

类图

画类图时遇到了点问题

class Dummy {
  {field} A field (despite parentheses)
  {method} Some method
}

可以被解析
在这里插入图片描述

<img src='https://g.gravizo.com/svg?
@startuml;
Object <|-- ArrayList;
Object : equals();
ArrayList : Object[] elementData;
ArrayList : size();
@enduml
'>

不能被解析
在这里插入图片描述

注意

注意:上面的写法中,每个语句后面要接上 ; ,否则会解析失败。报错no @startuml

后来在github上找到了原因:https://github.com/TLmaK0/gravizo/issues/50
这里的;,相当于一个回车断句

目前解决方案

经过上面的探索。

  1. 每行后面都要加;,加完后语句会引起plantuml在其他ide比如idea上的解析失败,也就是不兼容idea上的plantuml插件
  2. 对类图支持不佳(也许是我没找到正确用法)。

综上还是放弃了在typora是直接编辑plantuml的想法。

所以目前做法是:

  • 对于文档
    typora上写文档

  • 对于uml图
    方案一:idea上用plantuml语法画uml图,右键复制并贴至typora里(我装了picgo),还算不是很复杂
    方案二:http://www.plantuml.com/plantuml/uml/SoWkIImgAStDuU9oICrB0J80 中绘制plantuml图,将生成链接贴进md

docsify

这里要提一下docsify这个博客框架,因为它添加了plantuml的支持,通过```plantuml可直接渲染图片,例如

```plantuml
@startmindmap
* 项目开发系统化建设

** 需求管理
*** 需求分析文档
*** 架构/功能设计文档
*** gitlab issue 看板
*** UI设计文档

** 代码开发
*** 代码仓库
**** gitlab
*** 代码协作
**** git
**** gitlab MR

** 代码质量
*** 测试用例
*** bug扫码插件
*** code review

** 产品
*** 持续测试
*** 持续集成
*** 持续发布
*** 产品存档
*** 产品说明文档

** 运维
*** 线上日志
**** 汇总,分类,查询
*** 线上监控
**** 实时业务状态
**** 异常报警

** 文档
*** 需求分析文档
*** 架构/功能设计文档
*** gitlab issue
*** UI设计文档
*** 产品说明文档
@endmindmap

在这里插入图片描述

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值