OpenFLOW - Ein Tool, um lokal schnell schöne Infrastrukturdiagramme zu erstellen

 (github.com/stan-smith)
46 Punkte von GN⁺ 2025-07-02 | 1 Kommentare | Auf WhatsApp teilen
  • Eine Open-Source-PWA zur Erstellung isometrischer Diagramme (3D-Stil), die im Browser läuft
  • Basiert auf React und der Isoflow-Engine, funktioniert ohne Installation auch offline und bietet verschiedene Funktionen wie Datenschutz, automatisches Speichern und einfaches Importieren/Exportieren
  • Alle Daten werden im lokalen Browser-Speicher abgelegt, Diagramme können frei als JSON-Dateien geteilt und gesichert werden
  • Unterstützt statisches Hosting wie GitHub Pages und Netlify, die PWA-Funktionen können in einer HTTPS-Umgebung vollständig genutzt werden

Überblick über OpenFLOW und Projektwert

  • OpenFLOW ist eine kostenlose Open-Source-PWA (Progressive Web App), die für Entwickler und IT-Fachleute nützlich ist, wenn sie Infrastrukturdesigns und Netzwerkstrukturen visualisieren
  • Im Vergleich zu konkurrierenden Tools kann lokal schnell und sicher gearbeitet werden, und die Funktionen sind auch ohne Netzwerkverbindung nutzbar
  • Mit der Isoflow-Engine lassen sich ansprechende Diagramme im 3D-Stil erstellen, und da keine Daten an externe Server übertragen werden, ist ein starker Datenschutz gewährleistet
  • Dank einer intuitiven UI, automatischem Speichern sowie Import/Export können verschiedene Teams und Einzelpersonen Netzwerke und Architekturdokumentationen bequem erstellen
  • Die Anforderungen an die Entwicklungsumgebung sind gering, und die Arbeit kann sofort ohne besondere Installation allein im Webbrowser beginnen

Hauptfunktionen

  • Erstellung isometrischer Diagramme: Visualisierung von Netzwerken, Systemen und technischen Diagrammen mit 3D-Anmutung
  • Automatisches Speichern: Arbeitsstände werden alle 5 Sekunden automatisch gespeichert
  • Datenschutz: Daten werden ausschließlich lokal im Browser gespeichert (Limit 5–10 MB)
  • Import/Export: Unterstützung für das Teilen und Sichern von Diagrammen als JSON-Dateien
  • Offline-Modus: Alle Funktionen sind auch ohne Internet nutzbar
  • Schneller Start: Als PWA installier- und startbar

Deployment und Hosting

  • Statisches Hosting: Deployment des build-Ordners auf GitHub Pages, Netlify, Vercel, AWS S3 usw.
  • HTTPS erforderlich: Für die ordnungsgemäße Funktion der PWA ist HTTPS notwendig (lokal ausgenommen)
  • Regelmäßige Backups empfohlen: Wichtige Arbeiten sollten als JSON exportiert und gesichert werden

Tech-Stack

  • React, TypeScript, Isoflow, PWA

Unterstützte Browser

  • Chrome/Edge (empfohlen), Firefox, Safari, mobile PWA-Unterstützung

Open Source und Beiträge

  • Isoflow Community Edition (MIT-Lizenz) + OpenFLOW (Unlicense)
  • Kann von allen frei verwendet, modifiziert und verteilt werden

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-07-02
Hacker-News-Kommentare
  • Erklärung, dass Mermaid.js zwar optisch nicht gefällt, die Syntax schwierig ist und es tendenziell viele Bugs gibt, aber dennoch verwendet wird, weil es eines der am besten von statischen Site-Generatoren unterstützten Diagramm-Tools ist; außerdem die Hoffnung, dass sich auch Isoflow-Diagramme so einfach in Markdown einbetten ließen
    • Danke für den interessanten Kommentar, wird zur TODO-Liste hinzugefügt
    • Die Grundidee von mermaid ist gut, aber die Syntax ist zu komplex und die Integration mit Tools wie GitLab instabil
    • Die Meinung, dass eine Markdown-Integration den Nutzern einen deutlich größeren Vorteil bieten würde
  • Vorschlag, Isoflow zusammen mit Styus zu verwenden; Stylus ist ein schlanker Home-State-Server, der CSS-Klassen automatisch verändert, dazu wurde auch der passende Link geteilt: https://github.com/mmastrac/stylus; die Erwartung, dass es gut mit der Isoflow-Bibliothek harmonieren könnte
  • Geteilt wird die Einschätzung, dass isometrische Diagramme aus den Büchern von Clive Maxfield schon immer gefallen haben; viele Schaltpläne seien nicht planar aufgebaut, etwa Flip-Flops, Halbleiterschichten oder FPGA-Architekturen, und durch das Hinzufügen einer Perspektive wirke die Information weniger komplex und sei leichter zu verstehen oder zu behalten; außerdem die Bewertung, dass sich dieser Ansatz auch für viele andere technische Bereiche gut eigne, mit Link: https://www.clivemaxfield.com
  • Hinweis, dass Snowflake kürzlich ein Produkt namens Openflow veröffentlicht hat, wodurch es schwerer auffindbar sein könnte; man sollte sich also Gedanken über die Namensgebung machen
  • Frage, was genau über Isoflow gelegt wurde, da unklar sei, ob Isoflow nicht ohnehin den zentralen Teil übernimmt
    • Tatsächlich übernimmt Isoflow 90 % der Arbeit; es wird überhaupt nichts versteckt, sondern nur direkt bereitgestellt, weil es keine Form gab, Community-Packs sofort einsatzbereit zu nutzen
  • Hervorgehoben wird, dass die ISOFLOW Community Edition https://github.com/markmanx/isoflow ohne besondere Zusatzarbeit nur so verpackt wurde, dass Setup und Ausführung sehr einfach sind; außerdem kann man JSON-Backups der Diagramme exportieren und wieder importieren, was praktisch unbegrenzt viele Diagramme ermöglicht, und damit werden die Einschränkungen der Community-Version direkt entschärft
    • Frage eines Nutzers, der mit Node.js nicht vertraut ist: Wo sich in Isoflows Code die Grafiken der 3D-Stil-Icons befinden, ob es SVG-Dateien sind und ob sich eigene Icons hinzufügen lassen
  • Lob für die Qualität der Diagramme; zugleich die Erinnerung an ein ähnliches Projekt aus der Vergangenheit, das bei der Monetarisierung Schwierigkeiten hatte und eingestellt wurde; dieses Projekt wirke jedoch als MIT-OSS so, als sei Monetarisierung derzeit nicht das Hauptziel; außerdem der Hinweis, dass der Link "Built with the Isoflow library" unten einen 404-Fehler liefert https://github.com/isoflow/isoflow
    • Fast alle Verdienste für Design und Icons liegen bei Isoflow; außerdem die Erklärung, dass die Community Edition so aufgebaut ist, dass sie Upgrades auf die Pro-Version fördert; es gibt keinerlei Monetarisierungspläne, sondern nur den Wunsch, dass die Leute es mit Freude nutzen; der Hinweis auf den fehlerhaften Link wird sofort übernommen
  • Frage, ob sich das auch auf GitHub Pages hosten lässt, sowie Bitte um einen Demo-Link
  • Positive Rückmeldung, dass es eine interessante App sei, sowie Dank für die ausführlich geteilten Informationen