obsidian-plantuml

KO | EN

gitlite — search

#javascript #react #ai #llm #golang #go #rust #java #nodejs #kubernetes #vue #awesome-list #pytorch #mcp

obsidian-plantuml

(★ 529)

Generate PlantUML Diagrams inside Obsidian.md

File Explorer

Download Latest Version (.zip)

- - bug_report.yml
  - config.yml
  - feature_request.yml
- - main.yml
  - publish.yml
- - debouncedProcessors.ts
  - localProcessors.ts
  - processor.ts
  - serverProcessor.ts
- cache.ts
- const.ts
- embed.ts
- functions.ts
- main.ts
- PumlView.ts
- settings.ts
.eslintrc.js
.gitignore
esbuild.config.mjs
eslint.config.mjs
LICENSE
manifest.json
package-lock.json
package.json
README.md
styles.css
tsconfig.json
versions.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# PlantUML Support for Obsidian

[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

Render [PlantUML](https://plantuml.com) Diagrams in [Obsidian](https://obsidian.md)

---

![Demonstration](https://i.joethei.space/c5CVp0aX6h.gif)

This plugin uses either the [PlantUML Online Server](https://plantuml.com/server), or a local
`.jar` file for rendering.

You can also host your own server
([Docker](https://hub.docker.com/r/plantuml/plantuml-server) /
[JEE](https://plantuml.com/de/server) /
[PicoWeb](https://plantuml.com/de/picoweb)) and specify its address in the settings.

Please note that using the local rendering method is not as performant as using a server.

## Usage
Create a fenced codeblock using `plantuml` as the language.
Specify your plantuml code inside.
To generate a diagram with higher resolution use `plantuml-svg`

You can also use `plantuml-ascii` to generate ASCII Art.

Documentation on Plantuml can be found on [plantuml.com](https://plantuml.com/)

### Linking to notes in vault

Since the syntax for weblinks in PlantUML is the same for as for Wikilinks in Obsidian,
a special syntax is used:
`[[[Your other note]]]`
For the content of such a link refer to the [obisidian documentation](https://help.obsidian.md/How+to/Internal+link).

Normal web links are described [here](https://plantuml.com/de/link)

### Including an `.puml` file
> ⚠️ Only works when using local rendering

This works just as describe in the [official documentation](https://plantuml.com/de/preprocessing#393335a6fd28a804).

### Examples

~~~markdown
```plantuml
Bob -> Alice : hello
Alice -> Wonderland: hello
Wonderland -> next: hello
next -> Last: hello
Last -> next: hello
next -> Wonderland : hello
Wonderland -> Alice : hello
Alice -> Bob: hello
```
~~~

results in:

![](http://www.plantuml.com/plantuml/png/SyfFEhH0r-xG0iUSpEJKGmki3Yt8ICt9oUS2yo5IuVbvAQb5EObvAN1PX114ILvgHGbSKW48G08GAP_4ObGfa011NSWMe2X1IA2x6w46oUr0_y6a0000)

~~~markdown
```plantuml-ascii
Bob -> Alice : hello
Alice -> Wonderland: hello
Wonderland -> next: hello
next -> Last: hello
Last -> next: hello
next -> Wonderland : hello
Wonderland -> Alice : hello
Alice -> Bob: hello
```
~~~

results in:
```
     ┌───┐          ┌─────┐          ┌──────────┐          ┌────┐          ┌────┐
     │Bob│          │Alice│          │Wonderland│          │next│          │Last│
     └─┬─┘          └──┬──┘          └────┬─────┘          └─┬──┘          └─┬──┘
       │    hello      │                  │                  │               │   
       │──────────────>│                  │                  │               │   
       │               │                  │                  │               │   
       │               │      hello       │                  │               │   
       │               │─────────────────>│                  │               │   
       │               │                  │                  │               │   
       │               │                  │       hello      │               │   
       │               │                  │ ─────────────────>               │   
       │               │                  │                  │               │   
       │               │                  │                  │     hello     │   
       │               │                  │                  │ ──────────────>   
       │               │                  │                  │               │   
       │               │                  │                  │     hello     │   
       │               │                  │                  │ <──────────────   
       │               │                  │                  │               │   
       │               │                  │       hello      │               │   
       │               │                  │ <─────────────────               │   
       │               │                  │                  │               │   
       │               │      hello       │                  │               │   
       │               │<─────────────────│                  │               │   
       │               │                  │                  │               │   
       │    hello      │                  │                  │               │   
       │<──────────────│                  │                  │               │   
     ┌─┴─┐          ┌──┴──┐          ┌────┴─────┐          ┌─┴──┐          ┌─┴──┐
     │Bob│          │Alice│          │Wonderland│          │next│          │Last│
     └───┘          └─────┘          └──────────┘          └────┘          └────┘
```

## Known issues
Not all methods of using PlantUML support all different diagrams.
Following are a few known issues.
- ASCII can only ever generate Sequence diagrams
- The PicoWeb server does not support clickable links in png diagrams
- Some languages like chinese are not rendered correctly -> Switch to SVG rendering

## Installation
`Settings > Community plugins > Community Plugins > Browse` and search for `PlantUML`.

obsidian-plantuml

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

obsidian-plantuml

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README