mifupa

<p>BreznFlow turns n8n workflow JSON exports into interactive, zoomable SVG diagrams inside WordPress. Paste your workflow, and the plugin renders every node with brand-accurate colors, connection lines, and clickable detail panels — directly in your posts and pages.</p>
<p>The plugin was built for mifupa.com, a personal blog where n8n automations are documented regularly. Screenshots get outdated. Embedding the n8n editor is impractical. BreznFlow solves this: one shortcode, one interactive diagram, zero external dependencies.</p>
<h4>Learn more</h4>
<ul>
<li>Website: <a href="https://breznflow.com/" rel="nofollow ugc">breznflow.com</a></li>
<li>FAQ: <a href="https://breznflow.com/faq.html" rel="nofollow ugc">breznflow.com/faq</a></li>
<li>Live demo: <a href="https://breznflow.com/demo.html" rel="nofollow ugc">breznflow.com/demo</a></li>
</ul>
<h4>At a glance</h4>
<ul>
<li>Renders n8n workflow JSON as interactive SVG diagrams with zoom, pan, and click</li>
<li>86 node types with brand-accurate colors and icons (OpenAI, Slack, GitHub, Telegram, and more)</li>
<li>Click any node to inspect its parameters in a detail panel below the diagram</li>
<li>Automatically masks API keys, tokens, and secrets before storage — the raw JSON is never saved</li>
<li>3-step import wizard: paste JSON, configure display, preview and publish</li>
<li>5 built-in themes (Dark, Light, Minimal, Tech, Brezn) plus custom theme import</li>
<li>Shortcode <code>[breznflow id="X"]</code> with 13 attributes for per-instance configuration</li>
<li>Action bar with share, embed, get JSON, and download actions</li>
<li>Standalone embed page for iframe integration</li>
<li>Related workflows by shared node types</li>
<li>View counter and AI detection badges</li>
<li>Zero dependencies — vanilla JavaScript, no external CDN, no tracking</li>
</ul>
<h4>What makes BreznFlow different</h4>
<ul>
<li><strong>No external services.</strong> Everything runs locally inside WordPress. No CDN, no SaaS, no API calls during page loads.</li>
<li><strong>Security first.</strong> Sensitive data (API keys, tokens, secrets) is automatically detected and replaced with <code>[REDACTED]</code> before storage. The raw workflow JSON is never saved.</li>
<li><strong>Real interactivity.</strong> Not a static image — visitors can zoom, pan, and click nodes to see their configuration.</li>
<li><strong>Vanilla JavaScript.</strong> No React, no jQuery, no build step. The renderer is a single JS file that generates SVG elements directly.</li>
<li><strong>Built for real sites.</strong> Running on the developer’s own production sites since version 1.0.</li>
</ul>
<h4>Display modes</h4>
<ul>
<li><strong>Visual</strong> — full diagram with toolbar, detail panel, and action bar</li>
<li><strong>Info</strong> — node counts only (InfoBox summary like “3× HTTP Request, 2× Code”) — no diagram</li>
<li><strong>Compact</strong> — diagram without toolbar or action bar</li>
</ul>
<h4>Theme system</h4>
<p>5 built-in themes: Dark (default), Light, Minimal, Tech, and Brezn. Custom themes can be imported as <code>.breznflow.json</code> files containing 41 CSS color tokens. Themes are selectable globally, per workflow, or per shortcode.</p>
<h4>Node type registry</h4>
<p>86 predefined node types across 10 categories: Triggers, Core Logic, Data Transformation, Databases, Communication, Google, Dev Tools, AI, Storage, and CRM/Marketing. Unknown node types get a deterministic fallback with auto-generated colors — the same unknown type always looks the same.</p>
<h4>Sensitive data masking</h4>
<p>Before saving, BreznFlow runs a two-pass sanitization:</p>
<ol>
<li>All strings pass through WordPress sanitization</li>
<li>Secret detection scans for API keys in URL parameters, sensitive header values (Authorization, Bearer, X-API-Key), and high-entropy condition values</li>
</ol>
<p>A masking log records every redaction with reason and context — visible in the wizard preview.</p>
<h4>Action bar</h4>
<p>Below the diagram, the action bar provides four configurable actions:</p>
<ul>
<li><strong>Share</strong> — article link and anchor link for hash navigation</li>
<li><strong>Embed</strong> — iframe embed code for standalone embedding</li>
<li><strong>Get JSON</strong> — formatted JSON display with file size</li>
<li><strong>Download</strong> — sanitized JSON file download</li>
</ul>
<p>Each action can be enabled/disabled globally, per workflow, or per shortcode. Embed and Download use dual-gate security (global setting AND per-post permission).</p>
<h3>External Services</h3>
<p>This plugin optionally connects to external services only when you explicitly use the “Import from URL” feature in the workflow import wizard.</p>
<h4>Import from URL</h4>
<p>If you choose to import a workflow by pasting a URL instead of uploading or pasting JSON directly, the plugin makes an HTTP request to that URL using WordPress’s built-in <code>wp_remote_get()</code> function.</p>
<ul>
<li><strong>When:</strong> Only when you click the “Fetch” button in the Add Workflow wizard</li>
<li><strong>What is sent:</strong> Only the URL you provide — no WordPress data, no user data, no cookies</li>
<li><strong>To whom:</strong> Whatever server hosts the URL you provide</li>
<li><strong>Privacy policy:</strong> Depends on the server you connect to</li>
</ul>
<p>No data is transmitted automatically. No data is sent during normal page loads or to visitors browsing your site.</p>
<p>For security, requests to private and internal network addresses are blocked: localhost, <code>127.0.0.0/8</code>, <code>10.0.0.0/8</code>, <code>172.16.0.0/12</code>, <code>192.168.0.0/16</code>, and cloud metadata endpoints (e.g. <code>169.254.169.254</code>).</p>


BreznFlow

Display n8n workflows as interactive SVG diagrams with zoom, pan, node details, and automatic secret masking.

mateuszflowsystems

<p>Operate WordPress like modern infrastructure — turn any WordPress do_action into a first-class automation trigger your CRMs, n8n flows, AI agents, and internal services can consume.</p>
<p>📖 <a href="https://wpwebhooks.org/docs/" rel="nofollow ugc">Full documentation at wpwebhooks.org/docs/</a></p>
<h4>Core features (free)</h4>
<ul>
<li>Persistent delivery queue with smart retry and exponential backoff — powered by WP-Cron, auto-upgrades to Action Scheduler or System Cron when available, <strong>(Pro)</strong> External Cron for guaranteed reliability</li>
<li>Per-event UUID and ISO 8601 timestamp — enable downstream deduplication</li>
<li>Delivery logs with full attempt history, request/response inspection, replay, and bulk retry</li>
<li>Synchronous execution mode — fire inline without queue delay</li>
<li>Payload mapping — rename, restructure, exclude, and type-cast fields with dot-notation paths</li>
<li>Conditional dispatch — filter events by payload field values before dispatch</li>
<li>HTTP method, custom headers, and URL query parameters per webhook</li>
<li>Dynamic endpoint URLs — <code>{{ field.path }}</code> placeholders resolved at dispatch time (free via <code>fswa_webhook_url</code> filter)</li>
<li>Webhook Chains — wire 2xx completions to downstream webhooks with full observability</li>
<li>Credentials Vault — store reusable auth secrets (Bearer, Basic, API key, custom) encrypted at rest; reference them from webhooks instead of pasting raw Authorization headers. Secrets are write-only over the API — never returned, only a masked hint</li>
<li>Activity History — persistent audit log of every admin and API-token action</li>
<li>Built-in CF7 and IvyForms integrations — structured payloads, no extra plugins</li>
<li>Action Scheduler auto-detection — more reliable delivery on high-traffic sites</li>
<li>Full REST API with scoped API token authentication (<code>read</code> / <code>operational</code> / <code>full</code> / <code>agent</code>) — the <code>agent</code> scope grants full write access for AI assistants while never exposing stored secrets</li>
<li>Developer extensibility — 16 filters and 7 action hooks (<a href="https://wpwebhooks.org/docs/" rel="nofollow ugc">reference</a>)</li>
</ul>
<h4>Pro features</h4>
<ul>
<li>Code Glue — attach PHP snippets to any webhook+trigger (pre-dispatch payload enrichment, post-dispatch side effects)</li>
<li>External Cron — replace unreliable visitor-triggered WP-Cron with a managed external pinger, provisioned automatically on license activation. Two modes: plugin queue endpoint (down to 20 s interval, configurable batch size) or WP-Cron endpoint (60 s, covers all WordPress background work). No server crontab or external dashboard — controlled entirely from wp-admin, with a live heartbeat chart and inline error alerts</li>
<li>Unlimited conditions per trigger with AND/OR groups</li>
<li>Per-webhook retry limit and backoff strategy overrides</li>
<li>Dynamic URL templates — <code>{{ }}</code> syntax with no custom PHP required</li>
</ul>
<p><a href="https://wpwebhooks.org/pricing/" rel="nofollow ugc">See pricing and upgrade <span aria-hidden="true" class="wp-exclude-emoji">→</span></a></p>
<h4>Examples</h4>
<ul>
<li><a href="https://wpwebhooks.org/examples/cf7-to-webhook/" rel="nofollow ugc">Send Contact Form 7 submissions to a webhook (n8n demo)</a></li>
<li><a href="https://wpwebhooks.org/examples/gravity-forms-webhooks/" rel="nofollow ugc">Send Gravity Forms Submissions to n8n</a></li>
<li><a href="https://wpwebhooks.org/examples/ivyforms-to-webhook/" rel="nofollow ugc">Send IvyForms submissions to a webhook (n8n demo)</a></li>
<li><a href="https://wpwebhooks.org/examples/woocommerce-order-webhook-claude-code/" rel="nofollow ugc">WooCommerce orders to n8n on completion — wired up with a Claude Code agent</a></li>
<li><a href="https://wpwebhooks.org/examples/hubspot-woocommerce-integration/" rel="nofollow ugc">WooCommerce to HubSpot integration — sync orders, contacts, and deals with no custom code</a></li>
</ul>


Webhook Actions by Flow Systems

Turn any WordPress do_action into a first-class automation trigger your CRMs, n8n flows, AI agents, and internal services can consume.

BreznFlow vs Webhook Actions by Flow Systems