Installation
From WordPress.org (recommended)
- In your WordPress admin, go to Plugins → Add New Plugin
- Search for BreznFlow
- Click Install Now, then Activate
Manual (ZIP upload)
- Download the ZIP from WordPress.org
- Go to Plugins → Add New Plugin → Upload Plugin
- Select the ZIP file and click Install Now
- Activate the plugin
Requirements: WordPress 6.0+, PHP 8.0+.
Importing a Workflow
After activation, a new menu item BreznFlow appears in your WordPress admin.
Step 1: Start the Import Wizard
Go to BreznFlow → Add Workflow. The three-step wizard opens.
Step 2: Paste or Upload JSON
In n8n, open the workflow you want to share. Click the three-dot menu → Download. You get a .json file. In BreznFlow, either paste the JSON text directly or upload the file. You can also provide a URL to a raw JSON file.
BreznFlow automatically masks API keys, credential names, and Authorization header values in the imported data. The masking summary shows you what was masked.
Step 3: Configure & Preview
Set the display mode (Visual / Info / Compact), choose a theme, set the initial zoom level, toggle the title and infobox display. A live preview shows the result. Click Publish to save.
Shortcode Reference
Use [breznflow id="1"] in any post, page, or widget. Optional attributes:
| Attribute | Values | Default | Description |
|---|---|---|---|
| id | number | — | Required. Workflow ID. |
| mode | visual, info, compact | visual | Display mode. info shows node list only. compact hides action bar. |
| theme | dark, light, minimal, tech, brezn, custom-id | (plugin setting) | Visual theme. |
| show_title | 0, 1 | 1 | Show workflow title above diagram. |
| show_infobox | 0, 1 | 1 | Show node count summary. |
| show_download | 0, 1 | 0 | Show download button for the JSON. |
| show_share | 0, 1 | 1 | Show share modal (article link + anchor). |
| show_embed | 0, 1 | 0 | Show embed modal with iframe code. |
| show_get_json | 0, 1 | 0 | Show "Get JSON" modal. |
| zoom | 10–200 | 100 | Initial zoom level in percent. |
| max_code_lines | number | 50 | Max lines shown in code node preview. |
Example: [breznflow id="1" theme="tech" show_download="1" zoom="80"]
Custom Themes
BreznFlow themes are .breznflow.json files containing 41 color tokens. Each token maps to a CSS custom property: canvas_bg → --breznflow-canvas-bg.
Creating a Theme
The easiest way is to use the Theme Generator: load a preset, adjust colors with the color pickers, give your theme a name, and click Export Theme.
Token Groups
| Group | Tokens |
|---|---|
| Canvas & Nodes | canvas_bg, node_bg, node_text, node_sub, node_border |
| Connections | connection, connection_hover |
| Toolbar | toolbar_bg, toolbar_text, toolbar_border |
| Detail Panel | panel_bg, panel_text, panel_border |
| Buttons | btn_bg, btn_text, btn_border, btn_hover_bg |
| Action Bar | action_bar_bg, action_bar_border |
| Modals | modal_overlay_bg, modal_bg, modal_border, modal_title, modal_text, modal_sub, modal_close, modal_secondary_bg, modal_secondary_border, modal_code_bg |
| Tooltip | tooltip_bg, tooltip_text |
| Fullscreen & Minimap | fullscreen_overlay_bg, minimap_bg, minimap_border |
| Node Categories | color_trigger, color_http, color_code, color_logic, color_database, color_ai, color_fallback |
Uploading a Custom Theme
- In WordPress admin, go to BreznFlow → Themes
- Click Import Theme
- Upload your
.breznflow.jsonfile - The theme appears in the dropdown in shortcodes and settings
Use it: [breznflow id="1" theme="your-theme-id"]