Obsidian UML 图插件

DustWind2025-11-062025-11-18

一.Mermaid 插件

1.基本语法

在 Obsidian 中创建一个代码块，将语言设置为 mermaid，然后在代码块中编写你的类图语法。举例如下

---
title: Animal example
---
classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

2.详细语法

定义类与成员

定义区域：使用 classDiagram 标定绘制类图的区域。
定义类：使用 class ClassName {} 格式标定类，成员写在花括号内。
成员可见性：使用 +（公共）、-（私有）、#（保护）、~（包/内部）来修饰成员
区分方法与属性：名称后带括号 ()的被视为方法，否则为属性

定义类关系

类图的核心在于表达类之间的关系，Mermaid 支持多种关系类型：

关系	符号	说明
继承(泛化)(Inheritance)	<\|–
组合(Composition)	*–
聚合(Aggregation)	o–	表示强的”拥有”关系，部分与整体同生共死。
关联(Association)	- - >	符号间无空格。表示弱的”拥有”关系，部分可以独立于整体。
实线连接(Link-Solid)	–	表示类之间的已知联系，如单向关联。
依赖(Dependency)	..>	表示一个类的变化会影响另一个类（如使用局部变量）。
实现(Realization)	..\|>
虚线连接(Link-Dashed)	..

具体举例如下：

classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)

[!tip] 注意

**继承 (Inheritance)**：描述的是 **“是不是” (is-a)**的关系。继承是类与类的直接关系。比如，狗是一种动物。

**实现 (Realization)**：描述的是 **“有没有能力” (can-do)**的关系。实现是类与接口的关系。比如，飞机有能力飞行。

更多更详细语法可以参见 Class diagrams

二.PlantUML 插件

1.配置使用

首先安装在 Obsidian 第三方插件中搜索并安装 PlantUML 插件。然后是选择合适的渲染方式：在线服务器渲染，本地渲染（进阶用户）。

在线服务器渲染

此种方法的核心是将代码发送至 PlantUML 服务器然后生成图片，通常无需额外配置即可使用默认的在线服务器。。它明确需要足够稳定的网络，如果网络卡顿将极大影响生成时间。

[!注意]
如果遇到中文显示为乱码（方框），一个有效的解决方法是进入插件设置，将渲染格式切换到 SVG，因为 SVG 是矢量格式，对中文支持更好

本地渲染

文件下载与配置

首先需要配置 Java 环境，详细可以参见 [[学习/Java/Java 环境配置]]
然后是需要配置 Graphviz 环境，这是用于绘制布局的软件，PlantUML 依赖它来渲染许多类型的图表（如类图、状态图等）

[!tip] 注意
从 Graphviz 官网（下载页）下载并安装。对于 Windows 系统，安装后可能需要将安装路径（包含 dot.exe的目录）添加到系统的环境变量 PATH中，或者直接在 PlantUML 插件设置中指定该路径

在命令行输入如下代码：

dot -v

得到如下输出则为成功：

1	dot - graphviz version 14.0.2 (20251019.1705)

最后是下载最新的 plantuml.jar文件。可以从 PlantUML 的官方网站（官网首页）下载。然后将其放置在一个可用位置方便管理。使用类似如下命令可以检验安装是否正确：
1
java -jar D:\SoftWare\PlantUML\plantuml-1.2025.7.jar -tpng demo.puml

2.基本语法

创建一个代码块，将语言设置为 plantuml。PlantUML 的类图语法非常标准。举例如下：

@startuml
class Animal {
        +int age
        +String gender
        +isMammal() bool
        +mate()
    }
    
    class Duck {
        +String beakColor
        +swim()
        +quack()
    }
    
    class Dog{
	    + Color ：String 
	    + bark()
	    + running()
    }

Animal <|-- Duck
Animal <|-- Dog
@enduml

3.详细语法

更多详细语法可以参见 PlantUML 一览