Obsidian Stats logoObsidian Stats

BPMN Plugin

by joleaf
5
4
3
2
1
Score: 63/100
Install Code

Description

Category: Note Enhancements
#bpmn#workflow-modeling#diagram-editing

The BPMN Plugin plugin enables users to view and edit BPMN diagrams interactively within Obsidian notes. By using a specialized code block, users can embed BPMN diagrams and customize their display with various parameters such as zoom level, height, and background color. The plugin is powered by the bpmn-js library and supports token simulation, allowing for the dynamic visualization of workflows. Additionally, users can open BPMN files for editing in fullscreen mode and export them as SVGs. This plugin is ideal for those looking to integrate process modeling directly into their Obsidian workspace.

Reviews

No reviews yet.

Stats

35
stars
14,615
downloads
3
forks
1,386
days
18
days
21
days
195
total PRs
6
open PRs
97
closed PRs
92
merged PRs
18
total issues
4
open issues
14
closed issues
29
commits

Latest Version

8.0.0
22 days ago

Changelog

Breaking Change

  • Support only Obsidian >= 1.15.0

Fixed

  • Fixed ESLint issues in eslint-plugin-obsidianmd.
  • Fixed the BPMN popup positioning so it now appears beside the BPMN element.

New

  • Autocomplete for the code block parameters (url, height, opendiagram, showzoom, enablepanzoom, zoom, x, y, forcewhitebackground) while typing inside ```bpmn blocks
  • New command "Insert / Edit BPMN code block": create or edit a code block from a popup, with a *.bpmn file selector
  • New command "Create BPMN": creates a new *.bpmn file in the vault and opens it in the modeler (same as the "New BPMN" ribbon icon)
  • Show a readable error message when importing a *.bpmn file fails
See all version on GitHub

README file from

Github

BPMN-Plugin for Obsidian GitHub tag (latest by date) Release Obsidian Plugin Obsidian downloads

This plugin lets you view BPMN diagrams interactively in your Obsidian notes with an bpmn code-block. Furthermore, a BPMN modeler lets you edit your BPMNs directly in Obsidian. The plugin is based on the bpmn-js library.

NEW Feature: Token Simulation!

How to use (CodeBlock)

  1. Add a valid *.bpmn file to your vault
  2. Add the BPMN diagram to your note:
```bpmn
url: [[my-diagram.bpmn]]
```

Parameter

You can customize the view with the following parameters:

Parameter Description Values
url The url of the *.bpmn file (required). Relative/Absolute path, or as "[[*.bpmn]]" markdown link.
height The height of the rendered canvas. [200..1000]
opendiagram Show a link to the *.bpmn file. True/False
showzoom Show the zoom buttons below the canvas. True/False
enablepanzoom Enable pan and zoom. True/False
zoom Set the zoom level. Default is 'fit-viewport'. 0.0 - 10.0
x Set the x coordinate, if a zoom value is set. 0 - ... (default: 0)
y Set the y coordinate, if a zoom value is set. 0 - ... (default: 0)
forcewhitebackground Force a white background. True/False

While typing inside a bpmn code block, Obsidian autocompletes the parameter names (with a short value hint and the full description on hover).

Insert / Edit code block from a popup

You don't have to type the code block manually:

  1. Open a markdown note and put the cursor where the diagram should be inserted (or inside an existing bpmn code block to edit it)
  2. Run the command "Insert / Edit BPMN code block" from the command palette (it is only enabled while a markdown file is active)
  3. Pick the file with Browse... (all *.bpmn files of the vault are listed) and adjust the other parameters
  4. Click Insert — the code block is created at the cursor position (or the block the cursor was in gets replaced)

Create a new BPMN

The command "Create BPMN" creates a new *.bpmn file (in the folder of the active file) and opens it in the BPMN modeler. The New BPMN ribbon icon does the same.

Example

Example

How to edit the BPMN

Just open the BPMN file in your obsidian vault and the BPMN will be editable in fullscreen mode.

Features

  • Token simulation
  • Update properties
  • Export SVG

Install

.. automatically in Obsidian

  1. Go to Community Plugins in your Obsidian Settings and disable Safe Mode
  2. Click on Browse and search for "BPMN"
  3. Click install
  4. Toggle the plugin on in the Community Plugins tab

How to dev

  1. Clone this repo into the plugin folder of a (non-productive) vault (.obsidian/plugins/)
  2. npm i
  3. npm run dev
  4. Toggle the plugin on in the Community Plugins tab

Donate

Sponsors