https://github.com/joleaf/obsidian-bpmn-plugin
A small BPMN viewer for obsidian notes.
https://github.com/joleaf/obsidian-bpmn-plugin
Last synced: 14 days ago
JSON representation
A small BPMN viewer for obsidian notes.
- Host: GitHub
- URL: https://github.com/joleaf/obsidian-bpmn-plugin
- Owner: joleaf
- License: mit
- Created: 2022-11-12T15:22:06.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-25T15:17:28.000Z (2 months ago)
- Last Synced: 2025-02-25T16:26:33.314Z (2 months ago)
- Language: TypeScript
- Size: 1.01 MB
- Stars: 29
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-bpmn-io - Obsidian BPMN Plugin - A BPMN Viewer / Editor based on bpmn-js for [Obsidian](https://obsidian.md/) (Apps)
README
# BPMN-Plugin for Obsidian [](https://github.com/joleaf/obsidian-bpmn-plugin/releases) [](https://github.com/joleaf/obsidian-bpmn-plugin/actions/workflows/release.yml) [](https://obsidian.md/plugins?id=bpmn-plugin)
This plugin lets you view BPMN diagrams interactively in your [Obsidian](https://www.obsidian.md) 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](https://github.com/bpmn-io/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 |
### 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](obsidian://show-plugin?id=bpmn-plugin)"
3. Click install
4. Toggle the plugin on in the **Community Plugins** tab
### .. manually from this repo
1. Download the latest [release](https://github.com/joleaf/obsidian-bpmn-plugin/releases) `*.zip` file.
2. Unpack the zip in the `.obsidan/plugins` folder of your obsidian vault
## 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
