Diagramme Einbetten

Betten Sie interaktive Archyl-Diagramme in Ihre Dokumentationsplattformen, Wikis und Collaboration-Tools ein.

Unterstützte Plattformen

Archyl unterstützt die Einbettung in beliebte Collaboration-Tools:

Eine Einbettung Erstellen

Schritt 1: Einen Share-Link Erstellen

1. Öffnen Sie Ihr Projekt
2. Klicken Sie auf Teilen in der Toolbar
3. Klicken Sie auf Neuen Share-Link erstellen
4. Konfigurieren Sie Optionen:
   • Name (z.B. "Confluence-Einbettung")
   • Ablauf (optional)
5. Kopieren Sie den generierten Link

Schritt 2: Einbettungscode Erhalten

1. Im Teilen-Dialog klicken Sie auf den Einbetten-Tab
2. Wählen Sie Ihre Zielplattform
3. Kopieren Sie den bereitgestellten Code

Plattform-spezifische Anleitungen

Confluence

Mit Iframe-Makro:

1. Bearbeiten Sie Ihre Confluence-Seite
2. Fügen Sie das iframe- oder HTML-Makro ein
3. Fügen Sie den Einbettungscode ein:

<iframe
  src="https://app.archyl.com/embed/{shareToken}"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

Mit Widget Connector:

1. Fügen Sie das Widget Connector-Makro ein
2. Fügen Sie die Share-URL direkt ein
3. Passen Sie Breite und Höhe an

Notion

1. Auf einer Notion-Seite tippen Sie /embed
2. Wählen Sie Embed
3. Fügen Sie Ihre Share-URL ein
4. Klicken Sie auf Link einbetten
5. Passen Sie die Größe nach Bedarf an

Miro

1. Öffnen Sie Ihr Miro-Board
2. Klicken Sie auf das Apps-Symbol
3. Suchen Sie nach Embed oder iFrame
4. Fügen Sie die App zu Ihrem Board hinzu
5. Fügen Sie die Share-URL ein
6. Positionieren und skalieren Sie

SharePoint

1. Bearbeiten Sie Ihre SharePoint-Seite
2. Fügen Sie das Embed-Webpart hinzu
3. Fügen Sie den Einbettungscode ein
4. Speichern Sie die Seite

PowerPoint

1. Installieren Sie das Web Viewer Add-in
2. Fügen Sie das Add-in auf einer Folie ein
3. Geben Sie die Share-URL ein
4. Hinweis: Eingeschränkte Interaktivität im Präsentationsmodus

Generische Website

Fügen Sie dieses HTML zu jeder Webseite hinzu:

<iframe
  src="https://app.archyl.com/embed/{shareToken}"
  width="100%"
  height="600"
  style="border: none; border-radius: 8px;"
  allowfullscreen
></iframe>

Funktionen der Eingebetteten Ansicht

Die eingebettete Ansicht bietet:

Minimaler Header

• Projektname
• Aktuelle C4-Ebene
• Breadcrumb-Navigation
• Powered by Archyl-Badge

Volle Interaktivität

• Diagramm schwenken und zoomen
• Doppelklick zum Hineinzoomen
• Durch alle C4-Ebenen navigieren
• Elementdetails anzeigen

Responsives Layout

• Passt sich jeder Containergröße an
• Funktioniert in schmalen Seitenleisten
• Skaliert auf mobilen Geräten
• Sauberes, ablenkungsfreies Design

Anpassungsoptionen

Größe

Passen Sie Breite und Höhe im Einbettungscode an:

<iframe
  src="..."
  width="800"
  height="600"
></iframe>

Oder verwenden Sie Prozentangaben:

<iframe
  src="..."
  width="100%"
  height="80vh"
></iframe>

Initiale Ansicht

Fügen Sie Parameter hinzu, um die initiale Ansicht zu steuern:

?level=container    # Bei Container-Ebene starten
?level=component    # Bei Komponenten-Ebene starten

Styling

Fügen Sie benutzerdefinierte Styles zum Container hinzu:

<div style="border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
  <iframe src="..." width="100%" height="600" frameborder="0"></iframe>
</div>

Best Practices

Links Aktuell Halten

• Aktualisieren Sie Share-Links wenn sich die Architektur ändert
• Setzen Sie angemessene Ablaufdaten
• Erstellen Sie separate Links für verschiedene Kontexte

Für Betrachter Optimieren

• Starten Sie bei der passenden C4-Ebene für Ihr Publikum
• Executive Summary: Systemkontext
• Technische Übersicht: Container
• Implementierungsdetails: Komponente

Die Einbettung Dokumentieren

Fügen Sie Kontext um Ihr eingebettetes Diagramm hinzu:

• Kurze Beschreibung, was gezeigt wird
• Wann das Diagramm zuletzt aktualisiert wurde
• Link zum vollständigen Archyl-Projekt für Editoren

Abgelaufene Links Handhaben

Wenn ein Share-Link abläuft:

1. Erstellen Sie einen neuen Share-Link
2. Aktualisieren Sie den Einbettungscode
3. Informieren Sie Stakeholder bei Bedarf

Fehlerbehebung

Einbettung Lädt Nicht

• Prüfen Sie, ob der Share-Link nicht abgelaufen ist
• Verifizieren Sie, dass die URL korrekt ist
• Prüfen Sie Content Security Policy Einschränkungen
• Versuchen Sie es in einem Inkognito-Fenster

Interaktivitätsprobleme

• Einige Plattformen beschränken iframe-Interaktionen
• PowerPoint hat eingeschränkte Unterstützung während Präsentationen
• Prüfen Sie plattform-spezifische Einschränkungen

Größenprobleme

• Verwenden Sie Viewport-Einheiten (vh, vw) für responsives Sizing
• Setzen Sie eine Mindesthöhe (500px empfohlen)
• Testen Sie auf verschiedenen Bildschirmgrößen

Nächste Schritte

• Teilen - Share-Links erstellen und verwalten
• Export - Statische Bilder exportieren
• Benutzerflüsse - Fluss-Visualisierungen einbetten