/obsidian-plantuml

Generate PlantUML Diagrams inside Obsidian.md

Primary LanguageTypeScriptMIT LicenseMIT

Obsidian PlantUML

GitHub package.json version GitHub manifest.json dynamic (path) GitHub libera manifesto

Render PlantUML Diagrams in Obsidian

Demonstration

This plugin uses the PlantUML Online Server for rendering.

You can also host your own server (Docker / JEE / PicoWeb) and specify its address in the settings.

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

Examples

    ```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:

    ```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│
     └───┘          └─────┘          └──────────┘          └────┘          └────┘

Installation

Inside Obsidian

Settings > Third-party plugins > Community Plugins > Browse and search for PlantUML.

Manually installing the plugin

  • Clone this repo
  • npm i or yarn to install dependencies
  • npm run build
  • Copy over main.js, styles.css, manifest.json to your vault VaultFolder/.obsidian/plugins/obsidian-plantuml/.