ContextQMD
Back to Fossflow

FossFLOW - Isometrisches Diagramm-Werkzeug

docs/README.de.md

1.10.85.5 KB
Original Source

FossFLOW - Isometrisches Diagramm-Werkzeug

<p align="center"> <a href="../README.md">English</a> | <a href="README.cn.md">简体中文</a> | <a href="README.es.md">Español</a> | <a href="README.pt.md">Português</a> | <a href="README.fr.md">Français</a> | <a href="README.hi.md">हिन्दी</a> | <a href="README.bn.md">বাংলা</a> | <a href="README.ru.md">Русский</a> | <a href="README.id.md">Bahasa Indonesia</a> | <a href="README.de.md">Deutsch</a> </p>

<b>Hey!</b> Hier ist Stan. Wenn du FossFLOW benutzt hast und es dir geholfen hat, <b>würde ich mich sehr über eine kleine Spende freuen :)</b> 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!

<b>Außerdem!</b> Falls noch nicht geschehen, schau dir bitte die zugrunde liegende Bibliothek an, auf der dies aufbaut, von <a href="https://github.com/markmanx/isoflow">@markmanx</a>. Ich stehe hier wirklich auf den Schultern eines Riesen 🫡

<a href="https://www.buymeacoffee.com/stan.smith" target="_blank"></a>

Danke,

-Stan

Online ausprobieren

Gehe zu <b> --> https://stan-smith.github.io/FossFLOW/ <-- </b>

FossFLOW ist eine leistungsstarke, quelloffene Progressive Web App (PWA) zum Erstellen schöner isometrischer Diagramme. Gebaut mit React und der <a href="https://github.com/markmanx/isoflow">Isoflow</a>-Bibliothek (jetzt geforkt und auf NPM als fossflow veröffentlicht), läuft sie vollständig in deinem Browser mit Offline-Unterstützung.

🐳 Schnelle Bereitstellung mit Docker

bash
# 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:

bash
docker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest

Schnellstart (Lokale Entwicklung)

bash
# 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

bash
# 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

  1. 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"

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

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

Lizenz

MIT