drawio-github

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

Diagram

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 Diagram

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