让博客园设置支持PlantUml画图
[*]1. 引入
[*]2. 博客园不支持plantuml渲染
[*]3. 编写js脚本支持plantuml
[*]4. 缺点
1. 引入
众所周知，我们在写博客的时候，常使用PlantUML 和 Mermaid绘制图表、流程图、架构图。这是因为用代码去画图，不怎么需要手动控制格式、对齐、间距等细节，只需要专注于逻辑结构和内容本身，工具会自动完成布局和渲染。就像我们写博客的时候，更加偏向于markdown而不是富文本，这样可以让我们专注于博客内容，而不是总在调整格式。
博客园对与Mermaid支持原生渲染，例如：
```mermaid
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: 显示“发布成功”提示
``` 渲染结果如下：
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语法，博客园就会渲染失败
```plantuml
@startuml
actor 用户 as User
participant "博客园前端" as Frontend
participant "博客园后端" as Backend
database "数据库" as DB
User -> Frontend : 登录并进入写博客页面
Frontend --> User : 渲染编辑器
User -> Frontend : 编写文章，点击“发布”
Frontend -> Backend : POST /api/posts\n{title, content}
Backend -> DB : INSERT INTO posts(...)
DB --> Backend : OK
Backend --> Frontend : {success: true, id: 123}
Frontend --> User : 显示“发布成功”
@enduml
```
3. 编写js脚本支持plantuml
plantuml进行渲染，有很多种方法，其中一种方法如下：
[*]官方提供 PlantUML Server ：
[*]用户发送 PlantUML 文本（Base64 编码）
[*]服务端解析 → 调用 Graphviz → 返回 PNG/SVG
[*]例如：https://www.plantuml.com/plantuml/png/SoWkIImgAStDuNBAJrBGjLDmpCbCJbMmKiX8pSd9vt98pKi1IW80
在博客园页脚html代码输入如下js脚本：
最终便能够进行渲染了：
@startuml
actor 用户 as User
participant "博客园前端" as Frontend
participant "博客园后端" as Backend
database "数据库" as DB
User -> Frontend : 登录并进入写博客页面
Frontend --> User : 渲染编辑器
User -> Frontend : 编写文章，点击“发布”
Frontend -> Backend : POST /api/posts\n{title, content}
Backend -> DB : INSERT INTO posts(...)
DB --> Backend : OK
Backend --> Frontend : {success: true, id: 123}
Frontend --> User : 显示“发布成功”
@enduml4. 缺点
尽管上述方案可以让博客园支持插入plantuml语法，但是还是存在以下缺点：
[*]如果plantuml程序字符过长，可能会渲染失败。
[*]plantuml server在国外，可能会因为网络等因素导致渲染失败。
其实最好的方法就是博客园原生支持plantuml。
Make cnblogs great again！
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]