WordPress.org

Deutsch

Hol dir WordPress
WordPress.org

Plugin Directory

BreznFlow

BreznFlow

Von mifupa
Herunterladen

Beschreibung

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

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

Screenshots

  • 3-stufiger Import-Assistent — Schritt 1: n8n-Workflow-JSON einfügen, hochladen oder abrufen
  • Schritt 2: Anzeigeeinstellungen, Theme und Kategorien konfigurieren
  • Schritt 3: Live-SVG-Vorschau mit Zusammenfassung der Sicherheits-Maskierung
  • Frontend-Diagramm mit geöffnetem Node-Detailpanel
  • Kompakter Modus, der nur die Node-Infobox anzeigt
  • Workflow-Liste im Admin mit Schaltfläche zum Kopieren des Shortcodes

Installation

  1. Laden Sie die Plugin-ZIP-Datei herunter und gehen Sie im WordPress-Admin zu Plugins Installieren Plugin hochladen.
  2. Laden Sie die ZIP-Datei hoch und klicken Sie auf Jetzt installieren, anschließend auf Aktivieren.
  3. Gehen Sie zu BreznFlow Workflow hinzufügen.
  4. Fügen Sie Ihr n8n-Workflow-JSON ein, laden Sie eine .json-Datei hoch oder rufen Sie es von einer URL ab.
  5. Anzeigeeinstellungen (Modus, Theme, Zoom) konfigurieren und das Diagramm in der Vorschau prüfen.
  6. Veröffentlichen — verwenden Sie [breznflow id="X"] in einem beliebigen Beitrag oder einer Seite.

Das Plugin hat keinen Build-Schritt. Alle Assets sind direkte JS-/CSS-Dateien ohne Transpilieren oder Bundling.

FAQ

Wo bekomme ich ein Workflow-JSON?

Öffnen Sie in n8n Ihren Workflow und nutzen Sie das Menü: Workflow Export Download JSON. Fügen Sie das JSON dann in den Import-Assistenten von BreznFlow ein oder laden Sie die Datei direkt hoch.

Sind meine API-Schlüssel sicher?

BreznFlow erkennt gängige Geheimnis-Muster automatisch und ersetzt sie vor dem Speichern durch [REDACTED]. Dazu gehören API-Schlüssel in URL-Parametern, Authorization-Header und Bedingungswerte mit hoher Entropie. Das Maskierungs-Log im Assistenten zeigt genau, was maskiert wurde und warum. Das rohe Workflow-JSON wird nie gespeichert — nur die bereinigte Version.

Hinweis: JavaScript-Code in Code-Nodes (jsCode) wird als Klartext angezeigt und niemals im Browser ausgeführt, wird aber NICHT automatisch auf Geheimnisse geprüft. Überprüfen Sie den Inhalt von Code-Nodes vor der Veröffentlichung manuell.

Kann ich mehrere Workflows auf einer Seite einbetten?

Ja. Verwenden Sie [breznflow id="1"], [breznflow id="2"] usw. Das JavaScript und CSS werden nur einmal geladen, unabhängig davon, wie viele Shortcodes auf der Seite sind.

Welche n8n-Version wird unterstützt?

Das Plugin unterstützt das standardmäßige n8n-Workflow-JSON-Exportformat. Es wurde mit Workflows aus n8n 1.x getestet. Die Node-Typ-Registry deckt 86 vordefinierte Typen ab — unbekannte Typen werden mit automatisch generierten Farben und Initialen sauber dargestellt.

Können Besucher das Workflow-JSON herunterladen?

Nur, wenn Sie es aktivieren. Downloads erfordern, dass sowohl die globale Einstellung allow_download als auch die Download-Berechtigung pro Workflow aktiviert sind. Es ist ausschließlich das bereinigte (maskierte) JSON verfügbar — niemals das Original.

Wie funktioniert die Einbettungs-Funktion?

Wenn aktiviert, liefert BreznFlow eine eigenständige HTML-Seite unter ?breznflow_embed={id} aus — ohne WordPress-Theme, ohne Admin-Leiste, nur den SVG-Renderer. Diese können Sie per iFrame einbetten. Sowohl die globale Einstellung allow_embed als auch die Workflow-spezifische Berechtigung _breznflow_show_embed müssen aktiviert sein (Dual-Gate-Sicherheit). Die Embed-Seite enthält X-Robots-Tag: noindex, nofollow-Header.

Kann ich das Erscheinungsbild anpassen?

Ja, auf drei Ebenen: (1) Wählen Sie aus 5 mitgelieferten Themes oder importieren Sie eigene Themes mit 41 CSS-Farbtokens. (2) Legen Sie Anzeigemodus, Zoomstufe und Feature-Schalter pro Workflow fest. (3) Überschreiben Sie jede Einstellung pro Shortcode mit 13 verfügbaren Attributen.

Welche Shortcode-Attribute gibt es?

[breznflow id=“42″ mode=“compact“ theme=“light“ zoom=“80″ show_title=“1″ show_infobox=“1″ show_minimap=“0″ show_download=“0″ show_share=“1″ show_embed=“0″ show_get_json=“0″ max_code_lines=“50″]

Nur id ist erforderlich. Alle anderen Attribute greifen zunächst auf die gespeicherten Einstellungen des Workflows zurück, dann auf die globalen Plugin-Einstellungen.

Funktioniert es mit Page-Buildern?

Ja. BreznFlow verwendet einen Standard-WordPress-Shortcode ([breznflow]), der in Gutenberg, dem Classic Editor, Elementor, Divi, WPBakery und jedem anderen Builder funktioniert, der Shortcodes verarbeitet.

Verlangsamt es meine Website?

Nein. Das Renderer-JS und -CSS werden nur auf Seiten geladen, die einen [breznflow]-Shortcode enthalten. Während des Seitenaufrufs werden keine externen HTTP-Anfragen gestellt. Das gesamte Rendering erfolgt clientseitig.

Rezensionen

Für dieses Plugin gibt es keine Rezensionen.

Mitwirkende und Entwickler

„BreznFlow“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:

Mitwirkende

„BreznFlow“ wurde in 1 Sprache übersetzt. Danke an die Übersetzer für ihre Mitwirkung.

Übersetze „BreznFlow“ in deine Sprache.

Interessiert an der Entwicklung?

Durchstöbere den Code, sieh dir das SVN-Repository an oder abonniere das Entwicklungsprotokoll per RSS.

Änderungsprotokoll

1.0.4

  • Sicherheit: Erkennung generischer key-Felder (n8n-Google-API-Muster queryParameters.parameters[].name = "key") und Schwärzung, wenn der Wert wie ein Geheimnis aussieht. Schließt eine Lücke, durch die API-Schlüssel den namensbasierten Filter umgehen konnten.
  • Sicherheit: Defense-in-Depth-Entropie-Heuristik (looks_like_secret()) mit Anbieter-Regex für AIza / sk- / ghp_ / Bearer plus einem Länge+Zeichenklassen-Fallback — erkennt eigene Tokens, die die Namens-Allowlist nicht aufzählen kann.
  • Sicherheit: Anzeigenamen von Credentials und meta.instanceId werden geschwärzt, sodass Workflow-Exporte nicht mehr mit der ursprünglichen n8n-Instanz oder dem Team verknüpft werden können.
  • Sicherheit: Optionales Entfernen von Tags beim Veröffentlichen (Opt-in-Checkbox in Schritt 3 des Assistenten). Workflow-Tags sind oft unbedenklich, können aber gelegentlich identifizierend sein — die veröffentlichende Person entscheidet pro Workflow.
  • Sicherheit: Schritt 3 des Assistenten zeigt nun eine ausklappbare Tabelle mit Grund / Schlüssel / Hinweis, in der genau aufgelistet ist, was maskiert wurde, sodass Veröffentlichende vor dem Klick auf Veröffentlichen prüfen können.
  • Mobil: Das SVG-Touch-Handling wurde neu geschrieben. Das Verschieben mit einem Finger läuft jetzt flüssig; Pinch-to-Zoom und Doppeltipp-Zoom funktionieren auf iOS und Android. touch-action: none auf dem Diagramm-SVG beendet das Tauziehen zwischen Browser und Plugin um Gesten, das zuvor das „Finger verliert Tracking“-Stottern verursachte.
  • Mobil: Die Minimap reagiert jetzt auf Touch — tippen oder ziehen zum Navigieren.
  • Hinweis: Eine Touch-Geste, die auf dem Diagramm-SVG beginnt, blockiert das Scrollen der Seite, bis der Finger angehoben wird. Das ist Absicht, damit Gesten eindeutig sind; das Scrollen rund um das Diagramm funktioniert weiterhin.

1.0.3

  • Doppeltes Rendering behoben, wenn „Easy Table of Contents“ (oder ein anderes Plugin, das the_content-Filter erneut ausführt) aktiv ist. Der Shortcode dedupliziert wiederholte Aufrufe nun stillschweigend über einen Fingerabdruck aus Beitrags-ID + aufgelösten Render-Einstellungen.
  • Die Wrapper-id ist jetzt pro Instanz eindeutig (breznflow-wrap-<POSTID>-<COUNTER>), wodurch mehrere Einbettungen desselben Workflows mit unterschiedlichen Attributen in einem Beitrag möglich werden.
  • Der Anker-Span id="breznflow-<POSTID>" wird nur für die erste Instanz pro Beitrag ausgegeben, damit das DOM gültig bleibt und bestehende Teilen-Links erhalten bleiben.
  • Der Renderer verhindert nun das doppelte Einhängen in denselben Container.

1.0.2

  • Probleme der WordPress.org-Plugin-Prüfung behoben.
  • Die Embed-Seite verwendet nun wp_enqueue_style/wp_enqueue_script mit wp_head/wp_footer statt direkter HTML-Tags.
  • Nonce-Prüfung zur Schritt-Navigation des Assistenten (Schritte 2 und 3) ergänzt.
  • Eingabe-Bereinigung für $_FILES-Verarbeitung im Theme-Import verbessert.
  • JSON-Eingabeverarbeitung mit expliziter Typprüfung verbessert.
  • wp_strip_all_tags()-Escaping für Inline-CSS in wp_add_inline_style()-Aufrufen ergänzt.
  • Late Escaping (sanitize_key, esc_attr) in der CSS-Ausgabe eigener Themes ergänzt.
  • phpcs:ignore-Dokumentation für öffentliche, schreibgeschützte Endpunkte verbessert.

1.0.1

  • Warnungen des WordPress Plugin Check für die WordPress.org-Konformität behoben.
  • Veralteten load_plugin_textdomain()-Aufruf entfernt — Übersetzungen werden seit WP 4.6 automatisch von WordPress geladen.
  • Allen globalen Template-Variablen in themes.php wurde der Präfix breznflow_ vorangestellt, um die WPCS-Namenskonventionen einzuhalten.

1.0.0

  • Interaktiver SVG-Renderer mit Zoom, Verschieben und Node-Detailpanel.
  • 3-stufiger Import-Assistent mit JSON-Validierung, URL-Abruf und Maskierung sensibler Daten.
  • Node-Typ-Registry mit 86 Einträgen, inklusive Markenfarben und Icons.
  • Shortcode [breznflow] mit 13 Attributen für Modus, Zoom, Theme und Anzeige-Schalter.
  • Automatischer Zoom-Anpassung für große Workflows (konfigurierbarer Schwellenwert, Standard: 30 Nodes).
  • Minimap-Schalter pro Workflow und per Shortcode-Attribut.
  • 5 mitgelieferte Themes (Dark, Light, Minimal, Tech, Brezn) plus Import eigener Themes über .breznflow.json-Dateien.
  • Aktionsleiste mit Schaltflächen für Teilen, Einbetten, JSON anzeigen und Download.
  • Embed-Handler für eigenständige iFrame-Einbettung mit Dual-Gate-Sicherheit.
  • Download-Handler für bereinigten JSON-Export mit Dual-Gate-Sicherheit.
  • Zweistufige Maskierung sensibler Daten: URL-Parameter, Header-Werte und entropiebasierte Bedingungserkennung.
  • Aufrufzähler und verwandte Workflows anhand gemeinsamer Node-Typen.
  • KI-Erkennungs-Badges für Workflows, die KI-Nodes enthalten.
  • InfoBox-Node-Zusammenfassung (z. B. „3× HTTP Request, 2× Code“).
  • Unterstützung für strukturierte Daten nach Schema.org HowTo.
  • Anker-Navigation mit #breznflow-{id}-Hash-Links und 60-px-Scroll-Offset.
  • Eigener Inhaltstyp breznflow_workflow mit hierarchischer Taxonomie breznflow_category.
  • Vollständige deutsche Übersetzung.
  • Null Abhängigkeiten — Vanilla JavaScript, kein externes CDN, kein Tracking.

Meta

Bewertungen

Es wurden noch keine Rezensionen eingereicht.

Your review

Alle Rezensionen anzeigen

Mitwirkende

Support

Möchtest du etwas mitteilen? Brauchst du Unterstützung?

Support-Forum anzeigen