5.5 KiB
FossFLOW - Isometrisches Diagramm-Werkzeug 
English | 简体中文 | Español | Português | Français | हिन्दी | বাংলা | Русский | Bahasa Indonesia | Deutsch
Hey! Hier ist Stan. Wenn du FossFLOW benutzt hast und es dir geholfen hat, würde ich mich sehr über eine kleine Spende freuen :) Ich arbeite Vollzeit, und Zeit für dieses Projekt zu finden ist schon schwer genug. Wenn ich ein Feature für dich implementiert oder einen Bug behoben habe, wäre es toll, wenn du etwas spenden könntest :) Falls nicht, ist das kein Problem – diese Software bleibt immer kostenlos!
Außerdem! Falls noch nicht geschehen, schau dir bitte die zugrunde liegende Bibliothek an, auf der dies aufbaut, von @markmanx. Ich stehe hier wirklich auf den Schultern eines Riesen 🫡
Danke,
-Stan
Online ausprobieren
Gehe zu --> https://stan-smith.github.io/FossFLOW/ <--
FossFLOW ist eine leistungsstarke, quelloffene Progressive Web App (PWA) zum Erstellen schöner isometrischer Diagramme. Gebaut mit React und der Isoflow-Bibliothek (jetzt geforkt und auf NPM als fossflow veröffentlicht), läuft sie vollständig in deinem Browser mit Offline-Unterstützung.
- 🤝 CONTRIBUTING.md - Wie du zum Projekt beitragen kannst.
🐳 Schnelle Bereitstellung mit Docker
# Mit Docker Compose (empfohlen - beinhaltet persistenten Speicher)
docker compose up
# Oder direkt von Docker Hub mit persistentem Speicher ausführen
docker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest
Server-Speicher ist in Docker standardmäßig aktiviert. Deine Diagramme werden in ./diagrams auf dem Host gespeichert.
Um den Server-Speicher zu deaktivieren, setze ENABLE_SERVER_STORAGE=false:
docker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest
Schnellstart (Lokale Entwicklung)
# Repository klonen
git clone https://github.com/stan-smith/FossFLOW
cd FossFLOW
# Abhängigkeiten installieren
npm install
# Bibliothek bauen (beim ersten Mal erforderlich)
npm run build:lib
# Entwicklungsserver starten
npm run dev
Öffne http://localhost:3000 in deinem Browser.
Monorepo-Struktur
Dies ist ein Monorepo mit zwei Paketen:
packages/fossflow-lib- React-Komponentenbibliothek zum Zeichnen von Netzwerkdiagrammen (gebaut mit Webpack)packages/fossflow-app- Progressive Web App, die die Bibliothek umhüllt und präsentiert (gebaut mit RSBuild)
Entwicklungsbefehle
# Entwicklung
npm run dev # App-Entwicklungsserver starten
npm run dev:lib # Watch-Modus für Bibliotheksentwicklung
# Bauen
npm run build # Bibliothek und App bauen
npm run build:lib # Nur Bibliothek bauen
npm run build:app # Nur App bauen
# Testen & Linting
npm test # Unit-Tests ausführen
npm run lint # Auf Linting-Fehler prüfen
# E2E-Tests (Selenium)
cd e2e-tests
./run-tests.sh # End-to-End-Tests ausführen (erfordert Docker & Python)
# Veröffentlichen
npm run publish:lib # Bibliothek auf npm veröffentlichen
Verwendung
Diagramme erstellen
-
Elemente hinzufügen:
- Drücke die "+"-Taste im Menü oben rechts, die Komponentenbibliothek erscheint links
- Ziehe Komponenten per Drag-and-Drop aus der Bibliothek auf die Leinwand
- Oder klicke mit der rechten Maustaste auf das Raster und wähle "Knoten hinzufügen"
-
Elemente verbinden:
- Wähle das Verbindungswerkzeug (drücke 'C' oder klicke auf das Verbindungssymbol)
- Klick-Modus (Standard): Klicke auf den ersten Knoten, dann auf den zweiten
- Zieh-Modus (optional): Klicke und ziehe vom ersten zum zweiten Knoten
- Wechsle den Modus in Einstellungen → Verbindungen
-
Arbeit speichern:
- Schnellspeichern - Speichert in der Browser-Sitzung
- Exportieren - Als JSON-Datei herunterladen
- Importieren - Aus JSON-Datei laden
Speicheroptionen
- Sitzungsspeicher: Temporäre Speicherungen, die beim Schließen des Browsers gelöscht werden
- Export/Import: Permanente Speicherung als JSON-Dateien
- Automatisches Speichern: Speichert Änderungen automatisch alle 5 Sekunden in der Sitzung
Beitragen
Wir freuen uns über Beiträge! Siehe CONTRIBUTORS.md für Richtlinien.
Dokumentation
- FOSSFLOW_ENCYCLOPEDIA.md - Umfassender Leitfaden zur Codebase
- CONTRIBUTORS.md - Beitragsrichtlinien
Lizenz
MIT