BreznFlow
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. 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. Learn more Website: breznflow.com FAQ: breznflow.com/faq Live demo: breznflow.com/demo At a glance Renders n8n workflow JSON as interactive SVG diagrams with zoom, pan, and click 86 node types with brand-accurate colors and icons (OpenAI, Slack, GitHub, Telegram, and more) Click any node to inspect its parameters in a detail panel below the diagram Automatically masks API keys, tokens, and secrets before storage — the raw JSON is never saved 3-step import wizard: paste JSON, configure display, preview and publish 5 built-in themes (Dark, Light, Minimal, Tech, Brezn) plus custom theme import Shortcode [breznflow id="X"] with 13 attributes for per-instance configuration Action bar with share, embed, get JSON, and download actions Standalone embed page for iframe integration Related workflows by shared node types View counter and AI detection badges Zero dependencies — vanilla JavaScript, no external CDN, no tracking What makes BreznFlow different No external services. Everything runs locally inside WordPress. No CDN, no SaaS, no API calls during page loads. Security first. Sensitive data (API keys, tokens, secrets) is automatically detected and replaced with [REDACTED] before storage. The raw workflow JSON is never saved. Real interactivity. Not a static image — visitors can zoom, pan, and click nodes to see their configuration. Vanilla JavaScript. No React, no jQuery, no build step. The renderer is a single JS file that generates SVG elements directly. Built for real sites. Running on the developer’s own production sites since version 1.0. Display modes Visual — full diagram with toolbar, detail panel, and action bar Info — node counts only (InfoBox summary like “3× HTTP Request, 2× Code”) — no diagram Compact — diagram without toolbar or action bar Theme system 5 built-in themes: Dark (default), Light, Minimal, Tech, and Brezn. Custom themes can be imported as .breznflow.json files containing 41 CSS color tokens. Themes are selectable globally, per workflow, or per shortcode. Node type registry 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. Sensitive data masking Before saving, BreznFlow runs a two-pass sanitization: All strings pass through WordPress sanitization Secret detection scans for API keys in URL parameters, sensitive header values (Authorization, Bearer, X-API-Key), and high-entropy condition values A masking log records every redaction with reason and context — visible in the wizard preview. Action bar Below the diagram, the action bar provides four configurable actions: Share — article link and anchor link for hash navigation Embed — iframe embed code for standalone embedding Get JSON — formatted JSON display with file size Download — sanitized JSON file download 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). External Services This plugin optionally connects to external services only when you explicitly use the “Import from URL” feature in the workflow import wizard. Import from URL 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 wp_remote_get() function. When: Only when you click the “Fetch” button in the Add Workflow wizard What is sent: Only the URL you provide — no WordPress data, no user data, no cookies To whom: Whatever server hosts the URL you provide Privacy policy: Depends on the server you connect to No data is transmitted automatically. No data is sent during normal page loads or to visitors browsing your site. For security, requests to private and internal network addresses are blocked: localhost, 127.0.0.0/8, 10.0.0.0/8, 172.16.0.0/12, 192.168.0.0/16, and cloud metadata endpoints (e.g. 169.254.169.254).
Top keywords
- json11×1.55%
- breznflow9×1.27%
- workflow9×1.27%
- node8×1.13%
- data7×0.99%
- url7×0.99%
- action6×0.85%
- diagram6×0.85%
- import6×0.85%
- action bar5×0.70%
- bar5×0.70%
- embed5×0.70%
NinjaDraw – Diagram, Flowchart, Mind Map & Sketching Tool
🏆 The Best Flowcharts, Diagrams and Mind Maps Builder for WordPress Documentation | Upgrade to Pro Create flowcharts, diagrams, wireframes, and sketches with NinjaDraw, a hand-drawn style editor based on Excalidraw. Designed for bloggers, developers, and marketers, this tool allows for easy visual content creation. Perfect for educational blogs, business dashboards, project planning, UX/UI wireframing, and creative storytelling. Whether you’re a blogger, educator, marketer, or developer, NinjaDraw empowers you to design diagrams directly in WordPress – no coding or design skills needed! Seamlessly integrate flowcharts, brainstorming boards, process maps, and custom illustrations into your posts, pages, or sidebars. 🚀 Optimized WordPress Performance & Page Speed Note: NinjaDraw is built with website speed and Core Web Vitals in mind. In the WordPress admin, the heavy editor engine loads only when needed using smart lazy loading. On the frontend, your site remains lightning-fast because it only displays optimized, lightweight SVG files without heavy external scripts, layout shifts, or bulky base64 data. 🎯 Key Features Excalidraw Editor Integration – intuitive hand-drawn style drawing tool. Lightweight SVG Output – optimized vector files for SEO and fast loading. WordPress Media Library Integration – seamless image management inside the canvas. User-Friendly Interface – create diagrams in seconds with zero learning curve. Custom Styling & Branding – choose colors, fonts, and line styles to match your site. Responsive Layouts – diagrams, flowcharts, and sketches look sharp on desktops, tablets, and mobile. Save & Reuse Templates – store your canvas drawings and reuse diagrams across your site. 100% GDPR-Compliant – no data tracking or external servers, your sketches stay private. Shortcode & Gutenberg Support – embed diagrams anywhere using core Gutenberg blocks or shortcodes. NinjaDraw Free – General Features ✅ Unlimited Diagrams ✅ Vector Elements – rectangle, diamond, ellipse, arrow, line, text ✅ Smart Undo/Redo History – full history stack to undo/redo changes safely NinjaDraw Pro includes everything from Free, plus: ✅✨ Image Canvas Support – insert images from WordPress Media Library ✅✨ Open & Edit Native Files: import and edit .excalidraw files directly ✅✨ Frame tool – group and organize elements into clean layout frames ✅✨ Layout Frame Tool – group, section, and organize elements into clean mockup frames ✅✨ Interactive Web Embeds – easily embed external interactive web content into diagrams ✅✨ Laser Pointer Tool – highlight elements in real-time during live presentations ✅✨ Mermaid Import – instantly convert text scripts and code into flowcharts ✨ How to Create Diagrams & Mind Maps in WordPress Harness the power of Excalidraw’s intuitive tools directly in your WordPress editor dashboard. Create professional mind maps, process charts, flowcharts, and UI wireframes with drag-and-drop simplicity. ✨ Why Choose NinjaDraw Whiteboard? Universal Builder Integration: Works flawlessly with Gutenberg, Elementor, Divi, and all major themes. Vector Export Options: Save diagrams as PNG/SVG for sharing, backup, or offline use. Privacy First Framework: GDPR-compliant – no third-party tracking cookies or data collection. 🚀 Compatibility Not all themes and plugins are built the same way, so NinjaDraw is designed with extra compatibility in mind. NinjaDraw works seamlessly with modern WordPress themes and popular page builders that support standard blocks and shortcodes. PAGE BUILDERS * Gutenberg – modern built-in WordPress block editor * Classic Editor – classic built-in WordPress editor * Elementor – leading website builder platform on WordPress * WP Bakery – create any layout with intuitive way * Beaver – page builder you can trust with your business * Bricks – amazing block editor with many templates * Brizy – next-gen website builder that anyone can use * and more… 💼 GDPR & Privacy We do not collect or store any information about our visitors or users without their consent. We also do not transfer any data to external servers without users’ consent. 🔥 Check out our other WordPress Plugins HappyVR – virtual tour builder and 360 panorama viewer for WordPress MediaCommander – bring folders to media, posts, and pages Post Order Master – free drag & drop hierarchy manager PicPoints – create interactive images and multi-level floor plans in minutes Support Found an issue or have a feature request? Head over to our support forum or drop us an email for assistance. We’re here to help you create stunning mindflow diagrams with ease!
