FlowScript Diagrams

approved

by kilrkrow

Render ```flow code blocks as inline SVG flowcharts using FlowScript. - This plugin has not been manually reviewed by Obsidian staff.

↓ 122 downloadsUpdated 2mo agoMIT

Install in Obsidian View on GitHub

FlowScript Diagrams for Obsidian

Render fenced ```flow code blocks as inline SVG flowcharts inside any Obsidian note, powered by FlowScript.

Usage

Create a fenced code block with the language set to flow:

```flow
#start User Visits Page
  Enter Email
  #decision Valid?
    -> yes: #end Welcome
    -> no: Show Error
```

The block renders as an inline SVG diagram in both Live Preview and Reading view.

Syntax

FlowScript uses an indentation-driven DSL. A few key constructs:

Syntax	Meaning
`#start Label`	Start node (rounded rect)
`#end Label`	End node (rounded rect)
`#decision Label`	Decision diamond
`Plain text`	Process rectangle
`#subprocess`, `#io`, `#data`, `#note`	Additional shapes
`-> yes: Target`	Named branch
`~> Label`	Dashed / retry edge
`#group Name`	Logical grouping
`#lane Name`	Swimlane column
`@direction LR`	Flow direction (TB, BT, LR, RL)
`@theme clean-dark`	Theme override per diagram

Full syntax reference: kilrkrow/flowscript

Settings

Setting	Default	Description
Theme	Clean (light)	`Clean (light)` or `Clean (dark)`
Transparent background	Off	Removes the diagram background so it blends with your vault theme

Installation

Manual

Download main.js, manifest.json, and styles.css from the latest release
Copy them to .obsidian/plugins/flowscript-diagrams/ in your vault
Enable FlowScript Diagrams in Settings → Community Plugins

BRAT (beta)

Add kilrkrow/flowscript-for-obsidian in BRAT.

License

For plugin developers

Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.