← Back to Components

QdsDiagramHost

A component that embeds the diagrams.net (draw.io) editor in an iframe and provides a simple interface for loading and saving diagrams.

Overview

The qds-diagram-host component allows embedding and interacting with diagrams created using diagrams.net (draw.io). It provides a way to load, save, and display diagrams within a web application.

Usage

To use the qds-diagram-host component, include it in your HTML:

<diagram-host diagram="[diagram XML]"></diagram-host>

API Reference

Properties

• diagram - XML content of the diagram.

Events

• diagram-change - When the diagram content changes.

Example

<diagram-host diagram="<mxGraphModel..."></diagram-host>
<script>
  const diagramHost = document.querySelector('diagram-host');
  diagramHost.addEventListener('diagram-change', (event) => {
    console.log('Diagram changed:', event.detail.diagram);
  });
</script>