让博客园设置支持PlantUml画图

• 1. 引入
  
• 2. 博客园不支持plantuml渲染
  
• 3. 编写js脚本支持plantuml
  
• 4. 缺点
  

　　‍
1. 引入

　　众所周知，我们在写博客的时候，常使用PlantUML 和 Mermaid绘制图表、流程图、架构图。这是因为用代码去画图，不怎么需要手动控制格式、对齐、间距等细节，只需要专注于逻辑结构和内容本身，工具会自动完成布局和渲染。就像我们写博客的时候，更加偏向于markdown而不是富文本，这样可以让我们专注于博客内容，而不是总在调整格式。
　　博客园对与Mermaid支持原生渲染，例如：

1. ‍```mermaid
2. sequenceDiagram
3.     participant User as 用户
4.     participant Frontend as 博客园前端
5.     participant Backend as 博客园后端
6.     participant DB as 数据库
8.     User->>Frontend: 登录并进入写博客页面
9.     Frontend->>User: 渲染编辑器界面
10.     User->>Frontend: 编写文章并点击“发布”
11.     Frontend->>Backend: 发送 POST /api/posts (含标题、内容)
12.     Backend->>DB: 保存文章数据
13.     DB-->>Backend: 保存成功
14.     Backend-->>Frontend: 返回成功响应
15.     Frontend-->>User: 显示“发布成功”提示
16. ‍```

复制代码

　　渲染结果如下：
sequenceDiagram    participant User as 用户    participant Frontend as 博客园前端    participant Backend as 博客园后端    participant DB as 数据库    User->>Frontend: 登录并进入写博客页面    Frontend->>User: 渲染编辑器界面    User->>Frontend: 编写文章并点击“发布”    Frontend->>Backend: 发送 POST /api/posts (含标题、内容)    Backend->>DB: 保存文章数据    DB-->>Backend: 保存成功    Backend-->>Frontend: 返回成功响应    Frontend-->>User: 显示“发布成功”提示　　上述语法可以在博客园中进行原生渲染，very good。
2. 博客园不支持plantuml渲染

　　但是如果使用如下的plantuml语法，博客园就会渲染失败

1. ‍```plantuml
2. @startuml
3. actor 用户 as User
4. participant "博客园前端" as Frontend
5. participant "博客园后端" as Backend
6. database "数据库" as DB
8. User -> Frontend : 登录并进入写博客页面
9. Frontend --> User : 渲染编辑器
10. User -> Frontend : 编写文章，点击“发布”
11. Frontend -> Backend : POST /api/posts\n{title, content}
12. Backend -> DB : INSERT INTO posts(...)
13. DB --> Backend : OK
14. Backend --> Frontend : {success: true, id: 123}
15. Frontend --> User : 显示“发布成功”
16. @enduml
17. ‍```

复制代码

3. 编写js脚本支持plantuml

　　plantuml进行渲染，有很多种方法，其中一种方法如下：

• 官方提供 PlantUML Server ：
  
  
  
  • 用户发送 PlantUML 文本（Base64 编码）
    
  • 服务端解析 → 调用 Graphviz → 返回 PNG/SVG
    
  • 例如：https://www.plantuml.com/plantuml/png/SoWkIImgAStDuNBAJrBGjLDmpCbCJbMmKiX8pSd9vt98pKi1IW80
    
  
  

　　在博客园页脚html代码输入如下js脚本：

1. [/code]　　最终便能够进行渲染了：
2. [code]@startuml
3. actor 用户 as User
4. participant "博客园前端" as Frontend
5. participant "博客园后端" as Backend
6. database "数据库" as DB
8. User -> Frontend : 登录并进入写博客页面
9. Frontend --> User : 渲染编辑器
10. User -> Frontend : 编写文章，点击“发布”
11. Frontend -> Backend : POST /api/posts\n{title, content}
12. Backend -> DB : INSERT INTO posts(...)
13. DB --> Backend : OK
14. Backend --> Frontend : {success: true, id: 123}
15. Frontend --> User : 显示“发布成功”
16. @enduml

复制代码

4. 缺点

　　尽管上述方案可以让博客园支持插入plantuml语法，但是还是存在以下缺点：

• 如果plantuml程序字符过长，可能会渲染失败。
  
• plantuml server在国外，可能会因为网络等因素导致渲染失败。
  

　　其实最好的方法就是博客园原生支持plantuml。
　　Make cnblogs great again！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！