PlantUML Online

Mindmaps: node shapes 思维导图：节点形状 puml.online Tips: Draw Sequence Diagrams, Class Diagrams and More — Instantly puml.online 使用技巧：在线画好看的时序图、类图

C4 Model: Component Diagrams C4 模型：Component 图

C4 model: Container diagrams C4 模型：Container 图

C4 model: Context diagrams C4 模型：Context 图

Requirement diagrams: elements and relations 需求图：元素与关系

Quadrant charts: axes and quadrants 象限图：坐标轴与象限

User journeys: sections, tasks, actors 用户旅程图：Section 与 Task

Git Graph：分支与合并 Git graphs: branches, merges, cherry-pick

Mermaid mindmaps: the complete syntax template Mermaid 思维导图：完整语法模板 Pie charts: titles and data labels 饼图：标题与数据标签

Gantt charts: task dependencies 甘特图：任务依赖

Gantt charts: todayMarker 甘特图：todayMarker

ER diagrams: weak entities ER 图：弱实体

ER diagrams: cardinality and identifying relations ER 图：基数与标识关系

Flowcharts: click events and tooltips 流程图：交互与点击事件

Flowcharts: edge styles and arrows 流程图：边样式与箭头

Flowcharts: LR / TB / RL / BT directions 流程图：方向与布局

Flowcharts: Subgraph Grouping 流程图：Subgraph 拆图

Activity diagrams: parallel fork/join 活动图：并行 Fork/Join

Activity diagrams: decision and merge nodes 活动图：决策与合并

Activity diagrams: swimlanes / partitions 活动图：泳道（Swimlane）

State diagrams: entry/exit actions 状态机：entry / exit 动作

State diagrams: choice and fork pseudostates 状态机：choice 与 fork

State diagrams: composite states and history 状态机：复合状态与历史

Class diagrams: generics and collection types 类图：泛型与集合类型

Class diagrams: packages and namespaces 类图：包与命名空间

Class diagrams: stereotypes and interfaces 类图：Stereotype 与 Interface

Class diagrams: 6 UML relationship arrows 类图：6 种关系箭头

Sequence diagrams: lifeline control 时序图：生命线控制（activate/destroy）

Sequence diagrams: grouping with divider/box 时序图：分组（Divider/Group）

Sequence diagrams: notes (left/right/over) 时序图：Note 用法全解

Sequence diagrams: async messages and callbacks 时序图：异步消息与回调

Mermaid Gantt charts: project timelines, milestones, and dependencies Mermaid Gantt 图：项目管理时间线、里程碑与依赖关系 Mermaid State Diagram 教程：状态机、状态转换与正交状态 Mermaid State Diagram: state machines, transitions, and concurrent states PlantUML + CI/CD：GitHub Actions 自动渲染图、PR 检查与 Drift Detection PlantUML deployment diagrams: blue-green, canary, and rolling deployments PlantUML ER diagrams: from database schema to entity relationship diagrams PlantUML ER 图实战：从数据库设计到实体关系图 PlantUML in CI/CD: GitHub Actions auto-render, PR checks, and drift detection PlantUML 画部署图：蓝绿部署、灰度发布与金丝雀发布

Mermaid Flowchart advanced: node shapes, edges, Subgraph grouping, and Layout directions Mermaid Flowchart 进阶：从节点形状到 Subgraph 拆图

PlantUML as a structured JSON renderer — turn config / API responses / any JSON into a tree PlantUML 结构化 JSON 展示：把配置 / API 响应 / 任意 JSON 画成树 PlantUML vs Mermaid pros/cons panorama + selection decision tree PlantUML vs Mermaid 优缺点全景 + 选型决策树 PlantUML vs Mermaid syntax side-by-side: 7 common diagrams, line by line PlantUML vs Mermaid 语法对照：7 种常用图逐行对照 PlantUML vs Mermaid: a macro comparison — two 'text-to-diagram' philosophies PlantUML vs Mermaid：宏观对比——两种「文本画图」哲学

Three pillars of observability: Logs / Metrics / Traces + OpenTelemetry + SLO 可观测性三支柱:Logs / Metrics / Traces + OpenTelemetry + SLO Blue/Green / Canary / Feature Flag / A/B testing: traffic shift, rollback 蓝绿/灰度/金丝雀发布:流量切换、回滚、A/B 测试 GraphQL API design: Schema / Resolver / N+1 / DataLoader / Federation GraphQL API 设计:Schema / Resolver / N+1 / DataLoader / Federation CDN and edge cache architecture: cache strategies, breakdown/avalanche/penetration, Cache-Control practice CDN 与边缘缓存架构:缓存策略、击穿雪崩穿透、Cache-Control 实战 Message queue architecture: Kafka / RabbitMQ / RocketMQ topology and ordering guarantees 消息队列架构:Kafka / RabbitMQ / RocketMQ 拓扑与顺序保证 Serverless event-driven architecture: Lambda / Step Functions / EventBridge / Saga Serverless 事件驱动架构:Lambda / Step Functions / EventBridge / Saga Mobile app architecture diagrams: iOS / Android / Flutter / React Native modularization 移动 App 架构图:iOS / Android / Flutter / React Native 模块划分 Monorepo vs Polyrepo: dependency graphs, build orchestration, CI strategy Monorepo vs Polyrepo:依赖图、构建编排、CI 策略 Database schema evolution: Flyway/Liquibase/Sqitch + PlantUML ER diagrams 数据库 schema 演化:Flyway/Liquibase/Sqitch + PlantUML ER 图 Auth protocol sequence diagrams: JWT / OAuth2 / SAML / OpenID Connect 认证协议时序图:JWT / OAuth2 / SAML / OpenID Connect PlantUML SVG accessibility: screen readers, WCAG, contrast PlantUML SVG 无障碍:屏幕阅读器、WCAG、配色对比度 PlantUML diagrams evolve with git: renaming, migration, archival PlantUML 图随 git 演化:重命名、迁移、archive 策略 Interactive PlantUML SVG: click-through, tooltips, JS wiring PlantUML 输出交互式 SVG:点击跳转、tooltip、JS 联动 PlantUML rendering engine internals: 7 Graphviz/dot tuning knobs PlantUML 渲染引擎内幕:Graphviz/dot 算法的 7 个调优点 PlantUML preprocessing deep-dive: Jinja/JSON/YAML injection and dynamic generation PlantUML 预处理进阶:Jinja/JSON/YAML 注入与动态生成 PlantUML CJK / Emoji / special-character rendering foot-guns and font setup PlantUML 中文/日文/Emoji 渲染踩坑与字体配置 PlantUML in containers: Docker / Podman / multi-version isolation PlantUML 容器化部署:Docker / Podman / 多版本隔离 PlantUML export post-processing: SVG to PDF / PPT / Markdown embedding PlantUML 导出后处理:从 SVG 到 PDF/PPT/Markdown 嵌入 Keeping PlantUML diagrams from rotting with unit tests 用单元测试守住 PlantUML 图不腐烂 Embedding PlantUML in Confluence / Jira / Notion PlantUML 嵌入 Confluence / Jira / Notion 的实战做法 PlantUML git lifecycle — pre-commit / CI / git-lfs / PR review PlantUML 在 git 工程里的全生命周期：pre-commit / CI / git-lfs / PR 评审 PlantUML with interactive diagrams — react-flow / Vue Flow / vis.js when PlantUML alone isn't enough PlantUML 与交互式图：react-flow / Vue Flow / vis.js 当 PlantUML 不够用时 PlantUML information leakage and compliance — source/diagram bidirectional exposure risks PlantUML 信息泄漏与合规：源代码↔图双向暴露的风险与缓解 PlantUML CLI power user — batch, stdin/stdout, CI, incremental builds PlantUML CLI 高级用法：批量渲染、stdin/stdout、CI 集成、增量构建 PlantUML multi-language notes — CJK fonts, RTL, Unicode, emoji PlantUML 多语言支持：CJK 字体、RTL、Unicode 字符、emoji 的全部配置 PlantUML cross-tool migration — D2, Mermaid, and Draw.io workflow and pitfalls PlantUML 跨工具迁移实战：迁到 D2、Mermaid、Draw.io 的工作流与陷阱 PlantUML in LLM Agents — visualising reasoning and human-in-the-loop PlantUML 在 LLM Agent 中的角色：让 AI 推理过程可视化与人机协同 PlantUML theme packs — building, distributing, and enforcing brand themes PlantUML 主题包：自制定义主题（CSS / !theme 编译 / 内部发布） PlantUML in enterprise wikis — Lark / Confluence / Notion three approaches PlantUML 在企业 wiki 嵌入：飞书 / Confluence / Notion 三套方案 PlantUML with AI — prompt patterns for Copilot / Cursor auto-generation PlantUML 与 AI：让 Copilot / Cursor 自动产出图代码的 prompt 模式 PlantUML vs Mermaid vs Graphviz DOT vs D2 — a complete DSL comparison PlantUML vs Mermaid vs Graphviz DOT vs D2：图 DSL 选型完整对比 Big PlantUML diagrams — subgraph, package, !include — staying fast past 1000 nodes PlantUML 大图拆分：subgraph、package、!include 让 1000 节点不卡顿 PlantUML in your IDE — VS Code, JetBrains, and Vim — three real workflows PlantUML 与 IDE 集成：VS Code / JetBrains / Vim 三端实战

PlantUML output formats: SVG, PNG, PDF, LaTeX, ASCII compared PlantUML 输出格式：SVG / PNG / PDF / LaTeX / ASCIIDoc 全对比从代码生成 PlantUML：5 种常见自动化方式 PlantUML 30 small tricks and features PlantUML 30 个小功能与小技巧 PlantUML project case study: a microservice from 0 to 1 PlantUML 完整项目案例：一个微服务从 0 到 1 PlantUML security profiles: INTERNET vs ALCAPONE vs LEGACY PlantUML 安全策略：internet / alcapone / legacy 安全等级 Render PlantUML from code in Hexo (server-side / client-side) PlantUML self-hosting: from plantuml.jar to Docker to enterprise K8s PlantUML 自部署：从 plantuml.jar 到 Docker 到企业内网 PlantUML Salt UI wireframes: from ASCII to UI mockups PlantUML Salt 表单、Form 表单、Json 视图：从数据到 UI PlantUML preprocessor directives & icon libraries PlantUML 预处理指令与图标库 PlantUML JSON / YAML 数据可视化与数学公式 PlantUML JSON/YAML visualization & math notation PlantUML network, Archimate, Ditaa diagrams — three special architectural views PlantUML 网络图、Archimate、Ditaa 三种架构图 PlantUML sequence diagram advanced: fragment, step, ref PlantUML 时序图高级用法：fragment、step、ref PlantUML mindmap & filesystem diagrams PlantUML 思维导图与文件系统图 PlantUML timeline, Gantt, WBS: project scheduling & breakdown PlantUML 时间线、甘特图、WBS：项目排期与拆解 PlantUML ER diagrams: data modeling & table relationships PlantUML ER 图：数据建模与表关系 PlantUML object diagrams: runtime snapshots PlantUML 对象图：运行时快照 PlantUML class diagrams: abstract, interface, association, dependency, qualifiers PlantUML 类图高级用法：抽象、接口、关联、依赖、限定符 PlantUML use case diagrams: from requirement to review PlantUML 用例图：从需求到评审 PlantUML component & deployment diagrams: code to production PlantUML 组件图与部署图：从代码到生产 PlantUML activity diagrams: branching to concurrent PlantUML 活动图实战：从分叉到并发 PlantUML state diagrams: four ways to model an order lifecycle PlantUML 状态图实战：订单状态机的 4 种写法 Drawing clean architecture diagrams in C4 with PlantUML 用 C4 模式在 PlantUML 里画清晰架构图 PlantUML + CI: 4 ways to keep diagrams from going stale PlantUML + CI：让架构图不会过期的 4 个办法 7 PlantUML anti-patterns PlantUML 的 7 个常见反模式 Putting PlantUML diagrams into PR reviews 用 PlantUML 把图放进 PR 评审 Embedding PlantUML in Hexo (server vs client rendering) 在 Hexo 博客里嵌入 PlantUML 图（服务端 / 客户端两套方案） PlantUML vs Mermaid vs Draw.io — which one to reach for PlantUML vs Mermaid vs Draw.io：选谁画什么图 Sequence diagrams: alt / opt / loop / par / critical / break / note 时序图的「else / alt / opt / loop」控制流 Class diagram theming: taming the default colors class 图主题实战：让色块不再扎眼 5 Real Ways Teams Use PlantUML PlantUML 在团队协作中的 5 个真实用法

PlantUML in documentation sites — Hexo, MkDocs, Sphinx and Docusaurus PlantUML 与文档站集成：Hexo / MkDocs / Sphinx / Docusaurus 全攻略 Data-driven PlantUML — generating diagrams from a database or API PlantUML 数据驱动 — 从数据库/API 实时生成图

5 PlantUML Diagram Templates (Copy-Paste Ready) 5 个 PlantUML 常用图模板（复制就能用） Getting Started with PlantUML: Why It Belongs in Your Toolbox PlantUML 入门：为什么它值得放进你的工具箱