Skip to content
Drawio GitHub Integration
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information. Updated link Oct 8, 2018
diagram.png Initial revision Mar 12, 2016
edit-diagram.html Update edit-diagram.html Sep 28, 2016
nanocms.css Removes reflection CSS Mar 13, 2016
nanocms.js Fixes dev URL Mar 14, 2016
self-editing.html Adds responsive inline SVG height Mar 14, 2016
self-editing.svg Update self-editing.svg Mar 13, 2016 GitHub Integration

Please read this for a high-level introduction.

GitHub support is now available

An example for integration into GitHub wikis is available here:!



Edit | Edit As New

edit-diagram.html does the I/O with GitHub and uses in embed mode for diagram editing. The page supports the following URL parameters: user, pass, repo, path, ref and action=open (the Edit link above is an example). Using action=open, links for immediate diagram editing in GitHub can be created (requires user and pass parameters). You can also use files on GitHub as templates in via the url parameter (see Edit As New above).

Supported file formats: .png, .svg, .html and .xml (default)

Self-editing SVG file

Self-editing Diagram

self-editing.svg is an SVG file with embedded PNG data (as a workaround for missing foreignObject support in Internet Explorer). This combines an image format (eg. for <img src="...") with scripting for GitHub integration. (Click on the link, not the image to enable editing.)

Self-editing HTML file

self-editing.html is a HTML file with embedded diagrams. The file uses nanocms.js for GitHub I/O and diagram editing, and Bootstrap and nanocms.css for some fancy CSS styles. HTML is used as a container for mutiple diagrams in different formats, including inline SVG with links.

You can’t perform that action at this time.