draw.io GitHub Integration

Tools and examples for using diagrams.net (formerly draw.io) with GitHub. Edit, store, and version-control diagrams directly in your repositories.

For a high-level introduction, see the draw.io Integration documentation.

Getting Started

The simplest way to use draw.io with GitHub is the built-in GitHub mode:

Open diagrams.net with GitHub mode

This lets you open, edit, and save .drawio, .png, .svg, and .xml diagram files directly from your GitHub repositories.

For embedding diagrams in GitHub wikis, see Embed Diagrams.

Supported File Formats

Format	Description
.xml	Default draw.io XML format
.png	PNG with embedded XML (editable image)
.svg	SVG with embedded XML (editable vector image)
.html	HTML wrapper with embedded diagram

Examples

Diagram Editor for GitHub

Edit | Edit As New | Edit with draw.io

edit-diagram.html provides a simple UI for editing diagrams stored in GitHub. It uses the GitHub Contents API for file I/O and embeds diagrams.net as an editor.

URL parameters:

Parameter	Description
user	GitHub username
pass	GitHub password or personal access token
org	GitHub organization or username
repo	Repository name
path	File path within the repository
ref	Branch or tag (default: main)
action=open	Immediately open the diagram for editing

Self-Editing SVG

self-editing.svg is an SVG file with embedded PNG data. It works as a regular image (for <img> tags) but also supports in-place editing via JavaScript when opened directly. Click the link (not the image) to enable editing.

Self-Editing HTML

self-editing.html is an HTML page with multiple embedded diagrams. It uses nanocms.js for GitHub I/O and diagram editing, with Bootstrap for styling. Append ?action=edit to the URL to enable editing and saving back to GitHub.

Dark Mode

SVG diagrams can adapt to light/dark themes using CSS. See Dark Mode documentation for details on:

• Automatic dark mode via prefers-color-scheme media query
• Manual dark mode via CSS :target pseudo-class

Light	Dark (system)	Dark (manual)

Project Structure

├── edit-diagram.html        # Standalone diagram editor with GitHub integration
├── self-editing.svg         # SVG with embedded editing capability
├── self-editing.html        # HTML page with multiple editable diagrams
├── nanocms.js               # JavaScript library for GitHub I/O and diagram editing
├── nanocms.css              # Styles for embedded diagrams
├── diagram.png              # Example PNG diagram
├── diagram-light-dark.svg   # Example SVG with system dark mode
├── diagram-target-dark.svg  # Example SVG with target-based dark mode
├── DARK-MODE.md             # Dark mode documentation
└── CLAUDE.md                # Development guidelines