Video failed to load

Markdown PlantUML 图表

1008 words
5 minutes
Markdown PlantUML 图表
1970-01-01
文章示例
PlantUML
/
Firefly
/
Markdown
ViewsLoading...
  1. 1Markdown 教程
  2. 2Markdown 扩展功能
  3. 3Markdown Mermaid 图表
  4. 4Markdown PlantUML 图表This article
  5. 5Firefly 代码块示例
  6. 6KaTeX 数学公式示例
  7. 7MDX 格式文章示例

Markdown 中 PlantUML 图表指南#

PlantUML 是一种使用纯文本描述图表的工具。你只需要写一段结构化语法，就可以生成时序图、类图、用例图、活动图等常见工程图。

它特别适合写在技术博客和项目文档里：

  • 图表和正文一起版本管理，便于协作与审阅
  • 修改图只需要改文本，适合频繁迭代
  • 能和 Markdown 无缝结合，保持文档统一

在 Firefly 中，plantuml 代码块会在构建阶段编码并生成服务器 SVG 地址，页面端再根据亮暗主题自动切换图源，并支持缩放、拖拽和全屏交互。

如果你想快速上手，可以记住这个最小模板：

@startuml Alice -> Bob: Hello Bob --> Alice: Hi @enduml

活动图示例#

@startuml start :用户提交订单; if (库存充足?) then (是) :冻结库存; :创建支付单; if (支付成功?) then (是) :生成发货单; :通知仓库拣货; else (否) :取消订单; :释放库存; endif else (否) :提示缺货; endif stop @enduml

状态图示例#

@startuml [*] --> 草稿 草稿 --> 待审核 : 提交 待审核 --> 草稿 : 驳回 待审核 --> 已发布 : 审核通过 已发布 --> 已归档 : 到期归档 已发布 --> 草稿 : 撤回修改 state 已发布 { [*] --> 可见 可见 --> 隐藏 : 手动隐藏 隐藏 --> 可见 : 恢复展示 } 已归档 --> [*] @enduml

用例图示例#

@startuml left to right direction actor 游客 actor 用户 actor 管理员 rectangle 博客系统 { usecase "浏览文章" as UC1 usecase "搜索内容" as UC2 usecase "发表评论" as UC3 usecase "点赞收藏" as UC4 usecase "审核评论" as UC5 usec

组件图示例#

@startuml package "Firefly Site" { [Astro App] as App [Markdown Parser] as Parser [PlantUML Encoder] as Encoder [Theme Switcher] as Theme [Search Indexer] as Search } cloud "PlantUML Server" as

部署图示例#

@startuml node "User Device" { artifact "Browser" } node "CDN / Edge" { artifact "Static Assets" } node "Cloudflare Worker" { artifact "SSR Handler" } node "PlantUML Service" { artifact "SVG Re

ER 图示例#

@startuml entity User { *id : uuid <<PK>> -- username : varchar email : varchar created_at : datetime } entity Post { *id : uuid <<PK>> -- author_id : uuid <<FK>> title : varchar content :

时序图示例（登录与刷新令牌）#

@startuml autonumber actor User as 用户 participant Web as 前端页面 participant API as 网关接口 participant Auth as 认证服务 database Redis as 会话缓存 用户 -> 前端页面 : 输入账号密码并提交 前端页面 -> 网关接口 : POST /login 网关接口 -> 认证服务 :

C4 风格容器图示例#

@startuml !includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml Person(user, "博客访客", "阅读文章与搜索内容") System_Boundary(system, "Firefly Blog") { Container(we

Support & Share

If this article helped you, please share or support!

Sponsor
Markdown PlantUML 图表
https://blog.wsh.moe/posts/markdown-plantuml/
Author
XiaYe
Published at
1970-01-01
Markdown Mermaid 图表
Markdown 教程
Related PostsSmart
1
Markdown Mermaid 图表
文章示例一个包含 Mermaid 的 Markdown 博客文章简单示例。
2
Firefly 代码块示例
文章示例在Firefly中使用表达性代码的代码块在 Markdown 中的外观。
3
Markdown 扩展功能
文章示例了解 Firefly 中的 Markdown 功能
4
Markdown 教程
文章示例一个简明的 Markdown 博客示例。
5
Firefly 一款清新美观的 Astro 博客主题模板
文章示例Firefly 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题模板，专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈，提供了丰富的功能模块和高度可定制的界面，让您能够轻松打造出专业且美观的个人博客网站。
Random PostsRandom

Comments

Share your thoughts and discuss with everyone

LEAVE A NOTE

Join the conversation

Markdown supported
0 / 300 words

Be kind. Good conversations start with you.

Conversation

Loading conversation…

Comments powered by Waline

Profile Image of the Author
XiaYe
Hello, I'm XiaYe.
Announcement
欢迎来到我的博客！这是一则示例公告。
Categories
Tags
More
Latest Moments
Site Statistics
Posts
13
Categories
2
Tags
19
Total Words
16,246
Running Days
0 days
Last Activity
0 days ago
Site Info
Build Platform
Vercel
Blog Version
Firefly v6.16.8
License
CC BY-NC-SA 4.0
Table of Contents
1
Markdown 中 PlantUML 图表指南
2
活动图示例
3
状态图示例
4
用例图示例
5
组件图示例
6
部署图示例
7
ER 图示例
8
时序图示例（登录与刷新令牌）
9
C4 风格容器图示例