Diagramme mit HTML-Code einbetten

Sie können ein Diagramm durch Verwendung eines HTML Code-Snippets als interaktives HTML-Element in eine Website oder einen Blog einbetten. Der Vorteil gegenüber einem Bildexport ist, dass stets die aktuellste Version des Diagramms auf der Seite angezeigt wird, in der das HTML Code-Snippet eingebettet ist.

Im folgenden Abschnitt wird erklärt, wie Sie Diagramme, die mit dem Process Manager erstellt wurden, als interaktives HTML-Element in eine Webseite oder Webanwendung, wie z.B. WordPress oder Confluence, einbinden können.

Um ein Diagramm in eine Webseite oder einen Blog einzufügen, nehmen Sie die folgenden Schritte vor:

  1. Wählen Sie zunächst ein Diagramm, welches Sie einbetten möchten, im Explorer aus.
  2. Klicken Sie in der Menüleiste des Explorers auf Freigeben und anschließend auf den Eintrag Diagramm Einbetten. Der Dialog Diagramm einbetten öffnet sich.
  3. Gehen Sie zum Tab Einbettung und kopieren das HTML-Code Snippet.
Kopieren Sie den Code, um ihn in eine Webseite einzufügen.
  1. Fügen Sie das kopierte Snippet in die gewünschte Stelle des HTML-Codes Ihrer Seite oder Blogposts ein.
  2. Falls die Einbettung für das ausgewählte Diagramm noch nicht aktiviert ist, klicken Sie auf den Link Lesezugriff freigeben.
Wenn Sie auf Lesezugriff widerrufen klicken, ist der Zugriff zum Link wieder gesperrt und das Diagramm ist für keine der Webseiten, in die das Diagramm über das Menü eingebettet wurde, mehr verfügbar.
  1. Klicken Sie auf Auflistung der unterstützten Blog- und Wikisysteme, um eine entsprechende Übersicht zu erhalten.

Bemerkung

Bitte beachten Sie, dass das Navigieren zu verlinkten Diagrammen oder Dokumenten über das eingebettete Diagramm nicht möglich ist. Wenn Sie Nutzern diese Möglichkeit anbieten möchten, verwenden Sie den Collaboration Hub.

Die Diagramm-Vorschau

Um das Diagramm in Ihre Webseite optimal einbetten zu können, haben Sie die Möglichkeit, die Abmessungen des Diagramms anzupassen und anschließend Größe sowie Seitenverhältnisse in einer Vorschau zu prüfen.

  1. Tragen Sie die gewünschte Breite und Höhe ein. Standardmäßig ist auto eingestellt, so dass die Größe des interaktiven Elements sich dem verfügbaren Platz im jeweiligen System anpasst.
  2. Klicken Sie auf den Link Vorschau, um die Größenänderungen zu betrachten.
Öffnen der Vorschau.

In der Vorschau wird Ihnen neben dem interaktiven Element auch der generierte HTML-Code angezeigt. Eine Zoom-Anzeige und Scrollbars werden dem erzeugten Element automatisch hinzugefügt.

Die generierte Vorschau und der zugehörige HTML-Code, mit dem das Diagramm eingebettet werden kann.