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

Farhan Srambiyan

<p>This plugin adds a customizable n8n chat widget to your website frontend. It allows visitors to interact with n8n chat workflows directly from your website through a popup interface.</p>
<h4>Features</h4>
<ul>
<li>Easily integrate n8n chat workflows into your website</li>
<li>Customizable chat widget appearance:
<ul>
<li>Choose the widget position (left or right)</li>
<li>Set custom widget title</li>
<li>Change the primary color</li>
<li>Select custom emoji icon or upload SVG icon</li>
<li>Adjust content zoom level (50% – 150%)</li>
</ul>
</li>
<li>Mobile-responsive design</li>
<li>Smooth animations</li>
<li>Lightweight implementation</li>
</ul>
<h4>Requirements</h4>
<ul>
<li>WordPress 5.0 or higher</li>
<li>n8n with an existing chat workflow</li>
</ul>
<h3>Configuration</h3>
<ol>
<li><strong>n8n Chat URL</strong>: Enter the full URL of your n8n chat webhook (e.g., <code>https://n8n.example.com/webhook/your-chat-id/chat</code>)</li>
<li><strong>Enable Chat Widget</strong>: Toggle to enable or disable the chat widget on your website</li>
<li><strong>Widget Position</strong>: Choose between right or left side positioning</li>
<li><strong>Chat Widget Title</strong>: Set the title that appears in the chat header</li>
<li><strong>Widget Color</strong>: Select a custom color for the widget button and header</li>
<li><strong>Chat Icon</strong>: Choose an emoji or upload an SVG icon for the chat button</li>
<li><strong>Chat Content Zoom</strong>: Adjust the zoom level of the chat content</li>
</ol>
<h3>External Services</h3>
<p>This plugin connects to an external service (n8n) to provide chat functionality:</p>
<h4>n8n Chat Service</h4>
<ul>
<li><strong>What is it?</strong>: n8n is a workflow automation platform that can be configured to provide AI-powered chat functionality.</li>
<li><strong>What data is sent</strong>: When a user interacts with the chat widget, their messages are sent to your n8n instance via the webhook URL you provide in the settings.</li>
<li><strong>When data is sent</strong>: Data is only sent when a user actively engages with the chat widget by opening it and sending messages.</li>
<li><strong>Terms and Privacy</strong>: This plugin requires you to have your own n8n instance or use n8n Cloud. For more information about n8n’s terms and privacy policy, please visit:
<ul>
<li><a href="https://n8n.io/legal/terms/" rel="nofollow ugc">n8n Terms of Service</a></li>
<li><a href="https://n8n.io/legal/privacy/" rel="nofollow ugc">n8n Privacy Policy</a></li>
</ul>
</li>
</ul>
<p>Note: You are responsible for ensuring that your use of n8n complies with all applicable laws and regulations regarding user data and privacy.</p>


n8n Chat Widget

Adds a customizable n8n chat widget to your website frontend. It allows visitors to interact with n8n chat workflows directly from your website throug …

BreznFlow vs n8n Chat Widget