Morgane Oger

Draw.io Integration Examples

Learn how to embed diagrams in your posts

Overview

This page demonstrates how to use the DrawIO component to embed diagrams in your posts. There are three main approaches:

  1. SVG Exports - Static diagrams saved as SVG files
  2. Embedded Iframes - Interactive diagrams from diagrams.net
  3. Diagram Data - Raw XML diagram data (advanced)

Example 1: SVG Export

This approach is best for static diagrams. Export your diagram as SVG from diagrams.net and place it in the /public/diagrams/ directory.

Simple flowchart diagram
Example: Simple Flowchart (SVG)

Example 2: Embedded Iframe

For interactive diagrams, you can embed directly from diagrams.net. The viewer allows panning and zooming without downloading files.

Example: Embedded Diagram (Interactive)

Example 3: Custom Sizing

You can customize the width and height of diagrams using the component props.

Detailed process flow
Example: Custom Sized Diagram

Getting Started

To use draw.io diagrams in your posts:

  1. Create a diagram at diagrams.net
  2. Export as SVG and save to /public/diagrams/
  3. Import the DrawIO component in your post
  4. Use the component with src, embedUrl, or diagramData

More Information

See DRAWIO_GUIDE.md for complete documentation on:

  • Different embedding options
  • Best practices and tips
  • Performance optimization
  • Troubleshooting