BreznFlow

BreznFlow verwandelt n8n-Workflow-JSON-Exporte in interaktive, zoombare SVG-Diagramme direkt in WordPress. Fügen Sie Ihren Workflow ein, und das Plugin rendert jeden Node mit markentreuen Farben, Verbindungslinien und klickbaren Detailpanels — direkt in Ihren Beiträgen und Seiten.

Das Plugin wurde für mifupa.com entwickelt, einen persönlichen Blog, in dem regelmäßig n8n-Automatisierungen dokumentiert werden. Screenshots veralten. Den n8n-Editor einzubetten, ist unpraktisch. BreznFlow löst das: ein Shortcode, ein interaktives Diagramm, null externe Abhängigkeiten.

Mehr erfahren

• Website: breznflow.com
• FAQ: breznflow.com/faq
• Live-Demo: breznflow.com/demo

Auf einen Blick

• Rendert n8n-Workflow-JSON als interaktive SVG-Diagramme mit Zoom, Verschieben und Klick
• 86 Node-Typen mit markentreuen Farben und Icons (OpenAI, Slack, GitHub, Telegram und mehr)
• Klicken Sie auf einen beliebigen Node, um dessen Parameter in einem Detailpanel unter dem Diagramm zu inspizieren
• Maskiert automatisch API-Schlüssel, Tokens und Geheimnisse vor der Speicherung — das rohe JSON wird niemals gespeichert
• 3-stufiger Import-Assistent: JSON einfügen, Anzeige konfigurieren, Vorschau und Veröffentlichung
• 5 mitgelieferte Themes (Dark, Light, Minimal, Tech, Brezn) plus Import eigener Themes
• Shortcode [breznflow id="X"] mit 13 Attributen für die Konfiguration pro Instanz
• Aktionsleiste mit Aktionen für Teilen, Einbetten, JSON anzeigen und Download
• Eigenständige Embed-Seite für iFrame-Integration
• Verwandte Workflows anhand gemeinsamer Node-Typen
• Aufrufzähler und KI-Erkennungs-Badges
• Null Abhängigkeiten — Vanilla JavaScript, kein externes CDN, kein Tracking

Was BreznFlow besonders macht

• Keine externen Dienste. Alles läuft lokal in WordPress. Kein CDN, kein SaaS, keine API-Aufrufe während des Seitenaufrufs.
• Sicherheit zuerst. Sensible Daten (API-Schlüssel, Tokens, Geheimnisse) werden automatisch erkannt und vor dem Speichern durch [REDACTED] ersetzt. Das rohe Workflow-JSON wird niemals gespeichert.
• Echte Interaktivität. Kein statisches Bild — Besucher können zoomen, verschieben und Nodes anklicken, um deren Konfiguration zu sehen.
• Vanilla JavaScript. Kein React, kein jQuery, kein Build-Schritt. Der Renderer ist eine einzige JS-Datei, die SVG-Elemente direkt erzeugt.
• Für echte Websites gebaut. Seit Version 1.0 im Produktiveinsatz auf den eigenen Websites des Entwicklers.

Anzeigemodi

• Visuell — vollständiges Diagramm mit Toolbar, Detailpanel und Aktionsleiste
• Info — nur Node-Zählungen (InfoBox-Zusammenfassung wie „3× HTTP Request, 2× Code“) — kein Diagramm
• Kompakt — Diagramm ohne Toolbar oder Aktionsleiste

Theme-System

5 mitgelieferte Themes: Dark (Standard), Light, Minimal, Tech und Brezn. Eigene Themes lassen sich als .breznflow.json-Dateien mit 41 CSS-Farbtokens importieren. Themes können global, pro Workflow oder pro Shortcode ausgewählt werden.

Node-Typ-Registry

86 vordefinierte Node-Typen in 10 Kategorien: Trigger, Core Logic, Daten-Transformation, Datenbanken, Kommunikation, Google, Dev-Tools, KI, Storage und CRM/Marketing. Unbekannte Node-Typen erhalten einen deterministischen Fallback mit automatisch generierten Farben — derselbe unbekannte Typ sieht immer gleich aus.

Maskierung sensibler Daten

Vor dem Speichern führt BreznFlow eine zweistufige Bereinigung durch:

1. Alle Strings durchlaufen die WordPress-Bereinigung
2. Die Geheimnis-Erkennung sucht nach API-Schlüsseln in URL-Parametern, sensiblen Header-Werten (Authorization, Bearer, X-API-Key) und Bedingungswerten mit hoher Entropie

Ein Maskierungs-Log protokolliert jede Schwärzung mit Grund und Kontext — sichtbar in der Assistenten-Vorschau.

Aktionsleiste

Unter dem Diagramm bietet die Aktionsleiste vier konfigurierbare Aktionen:

• Teilen — Artikel-Link und Anker-Link für Hash-Navigation
• Einbetten — iFrame-Embed-Code für eigenständige Einbettung
• JSON anzeigen — formatierte JSON-Anzeige mit Dateigröße
• Download — Download der bereinigten JSON-Datei

Jede Aktion kann global, pro Workflow oder pro Shortcode aktiviert/deaktiviert werden. Einbetten und Download nutzen Dual-Gate-Sicherheit (globale Einstellung UND Berechtigung pro Beitrag).

Externe Dienste

Dieses Plugin verbindet sich optional nur dann mit externen Diensten, wenn Sie die Funktion „Aus URL importieren“ im Workflow-Import-Assistenten ausdrücklich nutzen.

Aus URL importieren

Wenn Sie einen Workflow per URL importieren, statt JSON hochzuladen oder direkt einzufügen, sendet das Plugin eine HTTP-Anfrage an diese URL über die in WordPress eingebaute Funktion wp_remote_get().

• Wann: Nur, wenn Sie im Assistenten „Workflow hinzufügen“ auf die Schaltfläche „Abrufen“ klicken
• Was gesendet wird: Ausschließlich die von Ihnen angegebene URL — keine WordPress-Daten, keine Nutzerdaten, keine Cookies
• An wen: An den Server, der die von Ihnen angegebene URL hostet
• Datenschutzerklärung: Hängt vom Server ab, mit dem Sie sich verbinden

Es werden keine Daten automatisch übertragen. Bei normalen Seitenaufrufen oder gegenüber Besuchern Ihrer Website werden keine Daten gesendet.

Aus Sicherheitsgründen werden Anfragen an private und interne Netzwerkadressen blockiert: localhost, 127.0.0.0/8, 10.0.0.0/8, 172.16.0.0/12, 192.168.0.0/16 sowie Cloud-Metadaten-Endpunkte (z. B. 169.254.169.254).