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.

Carlos Vera

<p><strong>BravesChat</strong> is the bridge between your WordPress site and your <strong>N8N</strong> workflows: connect any AI agent you have built with your visitors, without extra code and in minutes.</p>
<h4>Designed for the N8N community</h4>
<ul>
<li><strong>N8N-ready webhook:</strong> Point BravesChat to your workflow URL and start receiving messages instantly. Supports an authentication token in the header (<code>X-N8N-Auth</code>) to protect your endpoints.</li>
<li><strong>Complete payload on every message:</strong> Each request includes the current message and the user’s unique <code>sessionId</code> — everything your N8N nodes need to maintain conversation context.</li>
<li><strong>Markdown responses:</strong> Your agent’s messages are rendered with rich formatting — bold, lists, links, and code — with no extra configuration.</li>
<li><strong>Conversation history with CSV export:</strong> Browse all sessions from the WordPress dashboard and export them to your CRM, spreadsheet, or database with one click.</li>
</ul>
<h4>Production-ready</h4>
<ul>
<li><strong>Three display modes:</strong> Floating widget, full screen, or mixed — global bubble with full screen on specific pages via a Gutenberg block.</li>
<li><strong>Dark mode admin panel:</strong> Toggle between light and dark theme. Preference is saved per user and restored without flash.</li>
<li><strong>Configurable business hours:</strong> Define when the chat is active and show a custom message outside those hours — ideal if your agent depends on a human in the loop.</li>
<li><strong>Built-in GDPR compliance:</strong> Consent banner that blocks the chat until the user accepts. Montserrat font loaded locally, no external requests.</li>
<li><strong>Full brand customization:</strong> Colors, texts, position, skin, and display mode — all adjustable without touching code.</li>
<li><strong>Reinforced security:</strong> The N8N authentication token travels only on the server — it is never exposed in the page HTML.</li>
<li><strong>WooCommerce compatible:</strong> Works in WooCommerce stores without conflicts, enabling conversational assistance throughout the purchase process.</li>
</ul>
<h4>Session identification with Fingerprinting</h4>
<p>BravesChat generates a unique <code>sessionId</code> per visitor based on browser characteristics (SHA-256 hash), without storing personal data. This allows N8N to maintain conversation context even if the user reloads the page.</p>
<h3>External services</h3>
<h4>N8N Webhook (user-configured)</h4>
<p>This plugin sends chat messages to an N8N webhook URL configured by the site administrator.</p>
<p><strong>What data is sent:</strong> The visitor’s chat message, conversation history, an anonymous session identifier (fingerprint), and the current page URL.</p>
<p><strong>When:</strong> On every message sent by a visitor through the chat widget, but only if the administrator has configured a webhook URL.</p>
<p><strong>Why:</strong> To forward the conversation to the administrator’s N8N workflow for AI processing.</p>
<p>The webhook URL, destination server, and all data processing are fully controlled by the site administrator. No data is sent to any Braves-operated server.</p>


BravesChat

Connect your WordPress site to your N8N AI agent. Professional chat widget with GDPR support, business hours, and full customization.

BreznFlow vs BravesChat