Ein Diagramm in Notion, Confluence oder die eigene Website einbetten

Ein DrillFlow-Diagramm kann in einer anderen Seite stehen und behält dort seine Tiefe: Wer liest, öffnet per Doppelklick die Ebene darunter und kommt über die Breadcrumbs zurück, ohne die Seite zu verlassen. Andere Einbettungen zeigen ein flaches Bild; diese zeigt das Diagramm selbst.

Ein Diagramm in einer Wiki-Seite: Doppelklick auf einen Schritt öffnet die Ebene darunter, die Breadcrumb führt zurück — die Seite drumherum bleibt stehen.
  1. Öffne das Diagramm im Editor.
  2. Wähle im ≡-Menü → Einbetten… und dann Einbett-Link erstellen.
  3. Der Dialog zeigt eine Live-Vorschau und drei Zeilen zum Kopieren: Link, HTML (ein <iframe>) und Bild. Welche du brauchst, hängt davon ab, wohin es kommt — siehe unten.
Der Einbetten-Dialog mit Live-Vorschau, Größenwahl und den Zeilen Link, HTML und Bild Der Einbetten-Dialog mit Live-Vorschau, Größenwahl und den Zeilen Link, HTML und Bild
Der Einbetten-Dialog: Vorschau, Größe und die drei Zeilen zum Kopieren.

Melde dich vorher an, wenn die Einbettung bleiben soll. Ein Link ohne Konto funktioniert nur 72 Stunden; danach zeigt die Seite, in die du ihn eingebettet hast, einen Fehler statt deines Diagramms. Ein kostenloses Konto behält seine Links.

Eine Einbettung ist ein Schnappschuss: Spätere Änderungen erreichen sie nicht. Für einen neueren Stand erstellst du einen neuen Link und fügst ihn erneut ein.

2a. Notion

  1. Kopiere im Einbetten-Dialog die Zeile Link.
  2. Tippe auf deiner Notion-Seite /embed und wähle Embed.
  3. Füge den Link ein und klicke auf Embed link.
  4. Zieh die Unterkante des Blocks nach unten, bis das ganze Diagramm hineinpasst.

2b. Confluence (Cloud)

  1. Kopiere im Einbetten-Dialog die Zeile Link.
  2. Tippe beim Bearbeiten der Seite /iframe und wähle das Makro iFrame.
  3. Füge den Link ein und setze eine Höhe in Pixeln — 480 ist ein guter Anfang, und eine Breite, wenn du eine feste willst.
  4. Veröffentliche die Seite.

Fügst du nur den Link ein, zeigt Confluence unter Umständen bloß eine Link-Karte — deshalb ist das iFrame-Makro der Weg zum Diagramm selbst.

2c. Die eigene Website oder ein Blog

  1. Kopiere im Einbetten-Dialog die Zeile HTML. Wähl dort vorher die Größe: Eine Breite von 100 % folgt der Spalte, in der es steht, auch auf dem Handy; die Höhe ist in Pixeln, weil ein Rahmen keine eigene Höhe hat.
  2. Füge ihn in das HTML der Seite ein, oder in den HTML- bzw. Code-Block deines Baukastens.

2d. Ein README, eine E-Mail, überall ohne Rahmen

GitHub, E-Mails und viele Wikis entfernen Rahmen. Kopiere dann die Zeile Bild: ein Markdown-Bild des Diagramms. Damit das Bild das interaktive Diagramm öffnet, setz einen Link auf das Diagramm darum: 

[![Mein Prozess](bild-adresse)](diagramm-url)
Das Bild, das ein geteilter Link mitbringt: die oberste Ebene des Diagramms als Standbild Das Bild, das ein geteilter Link mitbringt: die oberste Ebene des Diagramms als Standbild
Was die Zeile Bild liefert — ein Standbild der obersten Ebene.

Mehr

Wie sich Einbettungen verhalten, steht in der Hilfe: Hilfe → Einbetten.