Markdown中使用plantuml的探索

红太狼 2022-11-13 10:22 599阅读 0赞

# 问题 #

由于我经常使用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
    '>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvbm55ZWU_size_16_color_FFFFFF_t_70]

但是这里 内部的写法和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
    '>

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

## 类图 ##

画类图时遇到了点问题

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

可以被解析  
![在这里插入图片描述][20210326161227427.png]

不能被解析  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvbm55ZWU_size_16_color_FFFFFF_t_70 2]

# 注意 #

注意：上面的写法中，每个语句后面要接上 `;` ，否则会解析失败。报错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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvbm55ZWU_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvbm55ZWU_size_16_color_FFFFFF_t_70]: /images/20221022/864a9f46423b45ab8203128311ba6db8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvbm55ZWU_size_16_color_FFFFFF_t_70 1]: /images/20221022/294dd4b3ff4c43eea31cb3a6698af3c4.png
[20210326161227427.png]: /images/20221022/f2c1ef8f4f9d45df91898ab71a7fc748.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvbm55ZWU_size_16_color_FFFFFF_t_70 2]: /images/20221022/c84526bfed034982ab600241d1ae990b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvbm55ZWU_size_16_color_FFFFFF_t_70 3]: /images/20221022/558a9697d7e74d8fbeb18a6b5438518e.png