VisEd: Whiteboards und Flipcharts digitalisieren und sofort nutzen

,

tl;dr: Analoge Whiteboards bieten unschlagbare Vorteile für kollaboratives Arbeiten – doch was passiert danach? Mit KI-gestützter Transkription, einem YAML-Parser und einem selbst entwickelten Visual Editor (VisEd) entsteht ein vollständiger Workflow: Workshop-Ergebnisse werden nicht nur digitalisiert, sondern bleiben editierbar, maschinenlesbar und sind im Arbeitsalltag sofort nutzbar.


Die Kraft des Haptischen: Warum analoge Tools unverzichtbar bleiben

Neulich hatte ich wieder die Freude, ein Team von Kolleg*innen durch ihre Klausur zu begleiten. Es ging um Prozessanalyse (für die bevorstehende KI-gerechte Aufbereitung) und die Planung des verbleibenden Jahres. Meine Aufgabe war es, den Raum zu öffnen für die unbestreitbaren Vorteile physischer Treffen: gemeinsam haptisch zu arbeiten und im echten Austausch zu stehen. Flipchart, Whiteboard und meine 3×3-Matrix sind und bleiben dabei meine Arbeitsmittel der Wahl.

Sie schaffen das, was unter Visual Facilitator*innen als „dritter Ort“ bekannt ist. Wo „Du und ich“ gemeinsam arbeiten oder worüber wir in den Dialog gelangen. Trotz digitaler Lösungen wie Miro & co. kann und will ich darauf nicht verzichten.

Ein bekanntes Problem: Was passiert nach dem Workshop?

Und doch bleibt ein Problem: wie damit weitermachen, wenn der Workshop, die Sitzung, die Klausur beendet ist? Ganz früher™ stand das Whiteboard noch für Wochen und Monate im Gemeinschaftsbüro oder bei der Führungskraft herum. Mehr oder weniger beachtet. Dann kam das „Fotoprotokoll“, leider viel zu oft ein PDF mit Aufnahmen der Wände und Flipchart-Poster. Mit etwas Glück gab es Ressourcen für die Transkription oder man musste sich selbst die Mühe machen, Handschrift in digitalen Text zu übersetzen.

KI als Game-Changer: Handschrift erkennen und Strukturen verstehen binnen Sekunden

Ralf Stockmann (https://chaos.social/@rstockm) hat gezeigt, dass moderne LLMs inzwischen (genauer: ungefähr seit Gemini 3.1) alle nötigen Fähigkeiten vereinen: Handschriften erkennen; Muster identifizieren; Cluster, Verbindungen, Prozesse verstehen; etc. – ich habe seinen Prompt-Vorschlag sofort getestet und war von den Ergebnissen begeistert: https://pad.wolkenbar.de/whiteboard_prompt

Die nächste Herausforderung: Ergebnisse nicht bloß dokumentieren, sondern direkt nutzen

Doch für die o.g. Teamklausur wollte ich einen Schritt weiter gehen. Das Team sollte die gemeinsam erreichten Ergebnisse nicht bloß in einer Datei ablegen, sondern sofort damit arbeiten können – schließlich hat man trotz der Kraft des Haptischen und des Momentums der Präsenz meistens noch weitere Ideen und Ergänzungen oder möchte den Faden im Alltag sogleich aufnehmen.

Die Lösung: Parser und Visual Editor

Mit etwas Vibecoding war ich in der Lage, Ralfs Prompt um zwei weitere Schritte zu ergänzen:

  1. Parser: eine Übersetzung der Whiteboard-Analyse in ein standardisiertes Format (YAML);
  2. Visual Editor (VisEd): ein Programm, um dieses Format zu visualisieren und editierbar zu machen.

Hier eine Demo-Version, das vollständige Programm gibt es weiter unten zum Download.

Interaktive Vorschau (nur Lesen) – volle Version mit Bearbeitung als ZIP-Download

VisED kann unterschiedliche Logiken visualisieren und editierbar machen: horizontale oder vertikale Abläufe (z.B. Prozesse oder Workflows); Matrizen mit beliebig vielen Zeilen und Spalten; Zeitstrahlen für die Jahresplanung… Und weil mir der Editor-Modus so gut gefallen hat, habe ich gleich noch die Möglichkeit eingebaut, ohne den Zwischenschritt des Parsers direkt im Editor neue Boards zu erstellen (inkl. Templates).

Der komplette Workflow im Überblick

Daraus ergibt sich folgender Workflow: Ich lasse mir ein oder mehrere Whiteboards von der KI transkribieren -> Der Parser erstellt ein YAML-Dokument. Dafür kombiniere ich einen eigenen Prompt mit einem Template für die KI. -> Das Team erhält zwei Dateien: meinen VisEd als stand-alone html-Datei sowie die YAML-Datei. -> das Team startet den VisEd, lädt die YAML-Datei und erhält eine strukturierte Visualisierung des ursprünglichen Boards. -> Wenn etwas verändert werden soll, wechseln sie in den Editor-Modus, nehmen ihre Ergänzungen vor und speichern ein aktualisiertes YAML-Dokument.

Fertig ist der Round-Trip :)

Fazit

Das Team ist unmittelbar nach der Klausur voll handlungsfähig und die Ergebnisse bleiben im digitalen Alltag relevant, verständlich und nutzbar. Dank YAML-Format sind sie außerdem maschinenlesbar, können also auch von einer beliebigen KI verarbeitet werden.

Wer das selber ausprobieren möchte, kann sich hier alles Nötige in einem ZIP-Archiv herunterladen:

Gebrauchsanweisung anzeigen

Visual Editor (VisEd) – Benutzerhandbuch

Download-Paket: Alle Dateien in diesem Ordner gehören zusammen. VisEd.html und whiteboard-data.yaml liegen im gleichen Verzeichnis – beim Öffnen über SharePoint oder einen Webserver werden die Daten automatisch geladen.

VisEd ist eine browserbasierte Anwendung zur Darstellung und Bearbeitung von Whiteboard-Boards: Prozesse, Workflows und Planungsmatrizen als farbige Karten mit Tabs, Phasen und Querverbindungen.

Es ist als Standalone-Lösung gedacht: keine Installation, kein Server, keine Datenbank. Programm und Inhalte liegen in getrennten Dateien.


Umgebung

VisEd läuft vollständig im Webbrowser auf dem lokalen Rechner oder über SharePoint / Intranet (http/https).

KomponenteBeschreibung
ProgrammVisEd.html – eine HTML-Datei mit eingebetteter Logik
Datenwhiteboard-data.yaml – Standarddatei (Demo-Inhalt WolkenWerk GmbH)
Demo-Kopiewhiteboard-demo-data.yaml – identischer Demo-Inhalt als Referenz/Backup
Parser (KI)Parser.md, whiteboard-template.yaml, parsing-examples.md

Typischer Ablageort: ein gemeinsamer Ordner auf dem Dateisystem oder in SharePoint, in dem VisEd.html und die YAML-Datei nebeneinander liegen.


Voraussetzungen

  • Moderner Browser (z. B. Chrome, Edge, Firefox, Safari – aktuelle Version)
  • Internetzugang beim ersten Öffnen (VisEd lädt Tailwind CSS und die YAML-Bibliothek von CDN)
  • Schreibzugriff auf den Ordner, wenn exportierte YAML-Dateien dort abgelegt werden sollen
  • Keine zusätzliche Software, Laufzeit oder Admin-Rechte nötig

Dateien im Überblick

VisEd-Download/
├── VisEd.html                # Programm starten
├── whiteboard-data.yaml      # Standard-Datendatei (Demo, wird auto-geladen)
├── whiteboard-demo-data.yaml # Demo-Referenz (gleicher Inhalt)
├── Readme.md                 # Dieses Handbuch
├── Parser.md                 # Systemprompt für KI-Konvertierung
├── whiteboard-template.yaml  # YAML-Schema-Vorlage
└── parsing-examples.md       # Parser-Beispiele

Die YAML-Datei kann auch mit einem Texteditor bearbeitet werden. VisEd liest und schreibt dasselbe Format.


Programm starten und Daten laden

Über SharePoint oder Webserver (http/https)

  1. VisEd.html im Browser öffnen (Link oder Doppelklick über SharePoint).
  2. VisEd lädt automatisch whiteboard-data.yaml aus dem gleichen Ordner (Demo-Inhalt WolkenWerk GmbH).

Lokal (file://)

  1. VisEd.html per Doppelklick oder „Öffnen mit …" im Browser starten.
  2. Der Browser blockiert oft das automatische Laden – es erscheint ein Dialog.
  3. „YAML-Datei öffnen" wählen und whiteboard-data.yaml oder whiteboard-demo-data.yaml auswählen.

Beide YAML-Dateien in diesem Paket enthalten denselben fiktiven Demo-Inhalt (WolkenWerk GmbH). whiteboard-data.yaml ist die Datei, die VisEd standardmäßig erwartet.


Arbeiten mit VisEd

Navigation

  • Tabs oben wechseln zwischen den Boards (Prozessen).
  • Schnellnavigation (Outline, Phasenleiste, Legende) springt zu Abschnitten innerhalb eines Boards – abhängig vom Layout der jeweiligen YAML-Datei.

Anzeigen und Bearbeiten

  1. Board betrachten (Standardmodus).
  2. „Bearbeiten" klicken, um den Bearbeitungsmodus für das aktuelle Board zu aktivieren.

Im Bearbeitungsmodus können Sie:

  • Text einer Karte anklicken und direkt ändern (Strg/Cmd+Enter speichert die Karte)
  • Farbe über das Farbsymbol wechseln
  • Karten einfügen über die +-Buttons zwischen den Karten
  • Karten löschen (mit Bestätigung)
  • Reihenfolge ändern per Drag & Drop (blauer Einfügebalken zeigt die Zielposition)
  • Neue Prozesse über „+ Neuer Prozess" anlegen (Vorlage wählen, Tab-Name und Titel eingeben)
  • Querverbindungen zeichnen: „Verbindung" aktivieren, Startkarte und Zielkarte nacheinander anklicken; bestehende Verbindungen können per Klick auf die Linie gelöscht werden

Je nach Layout-Typ stehen zusätzliche Optionen zur Verfügung (z. B. neue Zeilenpaare bei zweispaltigen Abläufen, leere Spalten füllen).

Änderungen speichern

Bearbeitungen bleiben nur in der aktuellen Browser-Sitzung im Arbeitsspeicher.

AktionErgebnis
YAML exportierenlädt whiteboard-data.yaml herunter – das ist die Standard-Speicherdatei
Backuplädt whiteboard-data-YYYY-MM-DD.yaml herunter (Archiv mit Datum)

Nach dem Export: Die heruntergeladene Datei im Projektordner ablegen und die alte Version ersetzen oder archivieren (Explorer, SharePoint – manuell).

Wichtig: Beim Schließen des Browser-Tabs ohne Export gehen ungespeicherte Änderungen verloren. VisEd zeigt „Ungespeichert" im Header und warnt beim Verlassen der Seite.

Beim nächsten Öffnen von VisEd.html startet eine neue Sitzung aus der zuletzt abgelegten YAML-Datei.


Tastaturkürzel

KürzelFunktion
Strg/Cmd + SYAML exportieren
Strg/Cmd + EBearbeitungsmodus ein/aus
Strg/Cmd + 1, 2, 3, …Zum Tab 1, 2, 3, … wechseln
Strg/Cmd + EnterKartentext speichern (im Textbearbeitungsmodus)
EscapeBearbeitung abbrechen, Link-Modus beenden, Dialoge schließen

YAML manuell bearbeiten (optional)

VisEd und die YAML-Datei sind getrennt. Sie können Inhalte auch direkt in whiteboard-data.yaml ändern:

  • Mehrzeilige Texte mit | oder |-
  • Kommentare mit # am Zeilenanfang
  • Jede in einem Board referenzierte Karte muss unter cards: definiert sein
  • Das Format-Feld muss whiteboard-boards lauten (formatVersion 3)

Nach manueller Bearbeitung: Datei speichern und in VisEd.html neu laden (bzw. Seite aktualisieren, wenn die YAML automatisch geladen wird).


Unterstützte Board-Layouts

VisEd kann verschiedene Layout-Typen darstellen, die in der YAML-Datei unter content.type stehen:

LayoutTypische Darstellung
Phasen-ProzessVertikaler Ablauf mit Phasen (z. B. Eingang → Prüfung → Abschluss)
SpaltenMehrere parallele Spalten (z. B. Regelprozess / Einzelfälle)
Zeilen-AblaufSchritte untereinander, teils nebeneinander (parallele Aktivitäten)
Vertikal / HorizontalEinfache Kartenfolge
MatrixRaster aus Karten
ZeitstrahlKarten mit Datum entlang einer Achse

Welche Layouts in Ihrer Datei vorkommen, ergibt sich aus den Boards in whiteboard-data.yaml.


Kurz-Checkliste für den Alltag

  1. VisEd.html öffnen
  2. YAML laden (automatisch oder per Dateiauswahl)
  3. Bearbeiten
  4. YAML exportieren
  5. Exportierte Datei im Projektordner ablegen
  6. Beim nächsten Mal wieder von Schritt 1 starten

Bei Fragen zum Datenformat oder zur Erzeugung neuer YAML-Dateien aus Whiteboard-Fotos: siehe Parser.md und parsing-examples.md in diesem Ordner (für KI-gestützte Konvertierung). Schema-Vorlage: whiteboard-template.yaml.


Urheber und Lizenz

Urheber: Simon Didszuweit · visimon.de

Software: Visual Editor (VisEd) und die Dateien in diesem Download-Paket (einschließlich VisEd.html, Parser-Dokumentation und YAML-Vorlagen).

Lizenz: GNU General Public License, Version 3 (GPL-3.0) oder jede spätere von der Free Software Foundation veröffentlichte Version.

Das entspricht für Software dem, was Creative Commons BY-SA 4.0 für Inhalte leistet: Sie dürfen das Programm nutzen, verbreiten und verändern – vorausgesetzt, Abwandlungen unter derselben Lizenz weitergegeben werden und der Urheber genannt wird.

Kurz:

  • Freiheit: Nutzen, Kopieren, Weitergeben und Anpassen erlaubt
  • Share Alike: Abgeleitete Werke müssen ebenfalls unter der GPL stehen
  • Quellenangabe: Urheber Simon Didszuweit / visimon.de beibehalten
  • Garantie: Software ohne Gewährleistung („as is")

Den vollständigen Lizenztext finden Sie unter gnu.org/licenses/gpl-3.0.

Die Demo-Daten (WolkenWerk GmbH) sind fiktiv und dienen nur zur Illustration; sie unterliegen derselben Lizenz wie die übrigen Paketdateien.