Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/joleaf/obsidian-bpmn-plugin

A small BPMN viewer for obsidian notes.
https://github.com/joleaf/obsidian-bpmn-plugin

Last synced: 2 months ago
JSON representation

A small BPMN viewer for obsidian notes.

Awesome Lists containing this project

README

        

# BPMN-Plugin for Obsidian [![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/joleaf/obsidian-bpmn-plugin)](https://github.com/joleaf/obsidian-bpmn-plugin/releases) [![Release Obsidian Plugin](https://github.com/joleaf/obsidian-bpmn-plugin/actions/workflows/release.yml/badge.svg)](https://github.com/joleaf/obsidian-bpmn-plugin/actions/workflows/release.yml) [![Obsidian downloads](https://img.shields.io/badge/dynamic/json?logo=obsidian&color=%238b6cef&label=downloads&query=%24%5B%22bpmn-plugin%22%5D.downloads&url=https%3A%2F%2Fraw.githubusercontent.com%2Fobsidianmd%2Fobsidian-releases%2Fmaster%2Fcommunity-plugin-stats.json)](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

![Example](example/bpmn-plugin.gif)

## 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

Buy Me a Coffee at ko-fi.com