BranchesTags

Latest commit

History

57 Commits

Folders and files

NameName
Last commit message
Last commit date
examples
examples
.gitignore
.gitignore
README.md
README.md

Repository files navigation

diagrams.net Integration

Integration, or "embed mode" is used for cases where the storage of the diagram is taken care of by a host application, and diagrams.net is used for diagram editing. In this case, diagrams.net is used inside an iframe or window with special URL parameters, and is remote controlled using the HTML5 Messaging API. Use embed.diagrams.net only for embed mode.

Basic flow

  1. Load embed.diagrams.net with special URL parameters inside an iframe
  2. Send the diagram data to the iframe for editing
  3. Receive and save diagram data from the iframe
  4. Remove iframe

Storage formats

Depending on the requirements, a PNG or SVG image or the XML for the diagram can be used as the storage format. Consider the following when picking the storage format:

  • Images (PNG and SVG) should be used for fast loading with no initial delay. Embedding the diagram data for editing in PNG and SVG images can be used to avoid saving the image and diagram separately, but will result in bigger image files. When using a viewer or editor, images should be used to show a placeholder or preview.
  • SVG images should be used if hyperlinks and vector images are required. (The SVG output of diagrams.net uses foreign objects, which are not supported in IE11 and earlier.)
  • XML should be used if no image version of the diagram is required or to store the XML separately from the image. A viewer or editor is required to handle these files.
  • PNG images should be used if a bitmap image is required, to support IE11 and earlier or for special fonts.

The storage can be any persistence mechanism. The image or XML file can be stored and used in the output of the host application, such as an image tag, SVG DOM or HTML viewer. Authentication, file descriptors, revisions etc must be handled by the host application. All communication between the host application and diagrams.net happens on the client-side.

Protocol

The protocol specification describes the full messaging API.

The basic flow of the protocol is:

  1. Wait for init event
  2. Send load action
  3. Wait for save/exit event

In some cases, additional steps may be required to check for a draft state or to export the diagram as an image. Special messages are available in the protocol to show draft states or a template dialog.

Fonts, colors, default styles, libraries, CSS and more can be configured to match the environment and style of the host application by using the configure=1 URL parameter. See localstorage-svg.html.

Examples

Embed Mode

JavaScript API for editing embedded SVG and PNG images in an HTML page.

Inline Editing

Editing with embedInline mode and adapting embedded SVG images to dark mode.

Local Storage

Saving and loading diagrams to/from HTML5 local storage.

WebDAV

Roundtrip editing of diagrams stored on a WebDAV server.

Chrome Extension

A template Chrome extension (Manifest V3) for adding draw.io diagram support to any web application. Based on a production integration. Includes diagram detection, inline editor, dark mode support, and placeholder save handler ready to be connected to your app's API.

Related

About

draw.io Integration

Resources

Readme
Activity
Custom properties

Stars

276 stars

Watchers

9 watching

Forks

93 forks
Report repository

Releases

Packages

Used by

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Latest commit
History
57 Commits
Folders and files
NameName
Last commit message
Last commit date
examples
examples
.gitignore
.gitignore
README.md
README.md
Repository files navigation
diagrams.net Integration
Integration, or "embed mode" is used for cases where the storage of the diagram is taken care of by a host application,
and diagrams.net is used for diagram editing. In this case, diagrams.net is used inside an iframe or window with special URL
parameters, and is remote controlled using the HTML5 Messaging API. Use embed.diagrams.net only for embed mode.
Basic flow
  1. Load embed.diagrams.net with special URL parameters inside an iframe
  2. Send the diagram data to the iframe for editing
  3. Receive and save diagram data from the iframe
  4. Remove iframe
Storage formats
Depending on the requirements, a PNG or SVG image or the XML for the diagram can be used as the storage format. Consider the following when picking the storage format:
  • Images (PNG and SVG) should be used for fast loading with no initial delay. Embedding the diagram data for editing in PNG and SVG images can be used to avoid saving the image and diagram separately, but will result in bigger image files. When using a viewer or editor, images should be used to show a placeholder or preview.
  • SVG images should be used if hyperlinks and vector images are required. (The SVG output of diagrams.net uses foreign objects, which are not supported in IE11 and earlier.)
  • XML should be used if no image version of the diagram is required or to store the XML separately from the image. A viewer or editor is required to handle these files.
  • PNG images should be used if a bitmap image is required, to support IE11 and earlier or for special fonts.
The storage can be any persistence mechanism. The image or XML file can be stored and used in the output of the host application, such as an image tag, SVG DOM or HTML viewer. Authentication, file descriptors, revisions etc must be handled by the host application. All communication between the host application and diagrams.net happens on the client-side.
Protocol
The protocol specification describes the full messaging API.
The basic flow of the protocol is:
  1. Wait for init event
  2. Send load action
  3. Wait for save/exit event
In some cases, additional steps may be required to check for a draft state or to export the diagram as an image. Special messages are available in the protocol to show draft states or a template dialog.
Fonts, colors, default styles, libraries, CSS and more can be configured to match the environment and style of the host application by using the configure=1 URL parameter. See localstorage-svg.html.
Examples
Embed Mode
JavaScript API for editing embedded SVG and PNG images in an HTML page.
Inline Editing
Editing with embedInline mode and adapting embedded SVG images to dark mode.
Local Storage
Saving and loading diagrams to/from HTML5 local storage.
WebDAV
Roundtrip editing of diagrams stored on a WebDAV server.
Chrome Extension
A template Chrome extension (Manifest V3) for adding draw.io diagram support to any web application. Based on a production integration. Includes diagram detection, inline editor, dark mode support, and placeholder save handler ready to be connected to your app's API.
Related
About
draw.io Integration
Resources
Readme
Activity
Custom properties
Stars
276 stars
Watchers
9 watching
Forks
93 forks
Report repository
Releases
Packages
Used by
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
57 Commits
Folders and files
NameName
Last commit message
Last commit date
examples
examples
.gitignore
.gitignore
README.md
README.md
Repository files navigation
diagrams.net Integration
Integration, or "embed mode" is used for cases where the storage of the diagram is taken care of by a host application,
and diagrams.net is used for diagram editing. In this case, diagrams.net is used inside an iframe or window with special URL
parameters, and is remote controlled using the HTML5 Messaging API. Use embed.diagrams.net only for embed mode.
Basic flow
  1. Load embed.diagrams.net with special URL parameters inside an iframe
  2. Send the diagram data to the iframe for editing
  3. Receive and save diagram data from the iframe
  4. Remove iframe
Storage formats
Depending on the requirements, a PNG or SVG image or the XML for the diagram can be used as the storage format. Consider the following when picking the storage format:
  • Images (PNG and SVG) should be used for fast loading with no initial delay. Embedding the diagram data for editing in PNG and SVG images can be used to avoid saving the image and diagram separately, but will result in bigger image files. When using a viewer or editor, images should be used to show a placeholder or preview.
  • SVG images should be used if hyperlinks and vector images are required. (The SVG output of diagrams.net uses foreign objects, which are not supported in IE11 and earlier.)
  • XML should be used if no image version of the diagram is required or to store the XML separately from the image. A viewer or editor is required to handle these files.
  • PNG images should be used if a bitmap image is required, to support IE11 and earlier or for special fonts.
The storage can be any persistence mechanism. The image or XML file can be stored and used in the output of the host application, such as an image tag, SVG DOM or HTML viewer. Authentication, file descriptors, revisions etc must be handled by the host application. All communication between the host application and diagrams.net happens on the client-side.
Protocol
The protocol specification describes the full messaging API.
The basic flow of the protocol is:
  1. Wait for init event
  2. Send load action
  3. Wait for save/exit event
In some cases, additional steps may be required to check for a draft state or to export the diagram as an image. Special messages are available in the protocol to show draft states or a template dialog.
Fonts, colors, default styles, libraries, CSS and more can be configured to match the environment and style of the host application by using the configure=1 URL parameter. See localstorage-svg.html.
Examples
Embed Mode
JavaScript API for editing embedded SVG and PNG images in an HTML page.
Inline Editing
Editing with embedInline mode and adapting embedded SVG images to dark mode.
Local Storage
Saving and loading diagrams to/from HTML5 local storage.
WebDAV
Roundtrip editing of diagrams stored on a WebDAV server.
Chrome Extension
A template Chrome extension (Manifest V3) for adding draw.io diagram support to any web application. Based on a production integration. Includes diagram detection, inline editor, dark mode support, and placeholder save handler ready to be connected to your app's API.
Related
About
draw.io Integration
Resources
Readme
Activity
Custom properties
Stars
276 stars
Watchers
9 watching
Forks
93 forks
Report repository
Releases
Packages
Used by
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
57 Commits
Folders and files
NameName
Last commit message
Last commit date
examples
examples
.gitignore
.gitignore
README.md
README.md
Repository files navigation
diagrams.net Integration
Integration, or "embed mode" is used for cases where the storage of the diagram is taken care of by a host application,
and diagrams.net is used for diagram editing. In this case, diagrams.net is used inside an iframe or window with special URL
parameters, and is remote controlled using the HTML5 Messaging API. Use embed.diagrams.net only for embed mode.
Basic flow
  1. Load embed.diagrams.net with special URL parameters inside an iframe
  2. Send the diagram data to the iframe for editing
  3. Receive and save diagram data from the iframe
  4. Remove iframe
Storage formats
Depending on the requirements, a PNG or SVG image or the XML for the diagram can be used as the storage format. Consider the following when picking the storage format:
  • Images (PNG and SVG) should be used for fast loading with no initial delay. Embedding the diagram data for editing in PNG and SVG images can be used to avoid saving the image and diagram separately, but will result in bigger image files. When using a viewer or editor, images should be used to show a placeholder or preview.
  • SVG images should be used if hyperlinks and vector images are required. (The SVG output of diagrams.net uses foreign objects, which are not supported in IE11 and earlier.)
  • XML should be used if no image version of the diagram is required or to store the XML separately from the image. A viewer or editor is required to handle these files.
  • PNG images should be used if a bitmap image is required, to support IE11 and earlier or for special fonts.
The storage can be any persistence mechanism. The image or XML file can be stored and used in the output of the host application, such as an image tag, SVG DOM or HTML viewer. Authentication, file descriptors, revisions etc must be handled by the host application. All communication between the host application and diagrams.net happens on the client-side.
Protocol
The protocol specification describes the full messaging API.
The basic flow of the protocol is:
  1. Wait for init event
  2. Send load action
  3. Wait for save/exit event
In some cases, additional steps may be required to check for a draft state or to export the diagram as an image. Special messages are available in the protocol to show draft states or a template dialog.
Fonts, colors, default styles, libraries, CSS and more can be configured to match the environment and style of the host application by using the configure=1 URL parameter. See localstorage-svg.html.
Examples
Embed Mode
JavaScript API for editing embedded SVG and PNG images in an HTML page.
Inline Editing
Editing with embedInline mode and adapting embedded SVG images to dark mode.
Local Storage
Saving and loading diagrams to/from HTML5 local storage.
WebDAV
Roundtrip editing of diagrams stored on a WebDAV server.
Chrome Extension
A template Chrome extension (Manifest V3) for adding draw.io diagram support to any web application. Based on a production integration. Includes diagram detection, inline editor, dark mode support, and placeholder save handler ready to be connected to your app's API.
Related
About
draw.io Integration
Resources
Readme
Activity
Custom properties
Stars
276 stars
Watchers
9 watching
Forks
93 forks
Report repository
Releases
Packages
Used by
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Latest commit
History
57 Commits
Folders and files
NameName
Last commit message
Last commit date
examples
examples
.gitignore
.gitignore
README.md
README.md
Repository files navigation
diagrams.net Integration
Integration, or "embed mode" is used for cases where the storage of the diagram is taken care of by a host application,
and diagrams.net is used for diagram editing. In this case, diagrams.net is used inside an iframe or window with special URL
parameters, and is remote controlled using the HTML5 Messaging API. Use embed.diagrams.net only for embed mode.
Basic flow
  1. Load embed.diagrams.net with special URL parameters inside an iframe
  2. Send the diagram data to the iframe for editing
  3. Receive and save diagram data from the iframe
  4. Remove iframe
Storage formats
Depending on the requirements, a PNG or SVG image or the XML for the diagram can be used as the storage format. Consider the following when picking the storage format:
  • Images (PNG and SVG) should be used for fast loading with no initial delay. Embedding the diagram data for editing in PNG and SVG images can be used to avoid saving the image and diagram separately, but will result in bigger image files. When using a viewer or editor, images should be used to show a placeholder or preview.
  • SVG images should be used if hyperlinks and vector images are required. (The SVG output of diagrams.net uses foreign objects, which are not supported in IE11 and earlier.)
  • XML should be used if no image version of the diagram is required or to store the XML separately from the image. A viewer or editor is required to handle these files.
  • PNG images should be used if a bitmap image is required, to support IE11 and earlier or for special fonts.
The storage can be any persistence mechanism. The image or XML file can be stored and used in the output of the host application, such as an image tag, SVG DOM or HTML viewer. Authentication, file descriptors, revisions etc must be handled by the host application. All communication between the host application and diagrams.net happens on the client-side.
Protocol
The protocol specification describes the full messaging API.
The basic flow of the protocol is:
  1. Wait for init event
  2. Send load action
  3. Wait for save/exit event
In some cases, additional steps may be required to check for a draft state or to export the diagram as an image. Special messages are available in the protocol to show draft states or a template dialog.
Fonts, colors, default styles, libraries, CSS and more can be configured to match the environment and style of the host application by using the configure=1 URL parameter. See localstorage-svg.html.
Examples
Embed Mode
JavaScript API for editing embedded SVG and PNG images in an HTML page.
Inline Editing
Editing with embedInline mode and adapting embedded SVG images to dark mode.
Local Storage
Saving and loading diagrams to/from HTML5 local storage.
WebDAV
Roundtrip editing of diagrams stored on a WebDAV server.
Chrome Extension
A template Chrome extension (Manifest V3) for adding draw.io diagram support to any web application. Based on a production integration. Includes diagram detection, inline editor, dark mode support, and placeholder save handler ready to be connected to your app's API.
Related
About
draw.io Integration
Resources
Readme
Activity
Custom properties
Stars
276 stars
Watchers
9 watching
Forks
93 forks
Report repository
Releases
Packages
Used by
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
57 Commits
Folders and files
NameName
Last commit message
Last commit date
examples
examples
.gitignore
.gitignore
README.md
README.md
Repository files navigation
diagrams.net Integration
Integration, or "embed mode" is used for cases where the storage of the diagram is taken care of by a host application,
and diagrams.net is used for diagram editing. In this case, diagrams.net is used inside an iframe or window with special URL
parameters, and is remote controlled using the HTML5 Messaging API. Use embed.diagrams.net only for embed mode.
Basic flow
  1. Load embed.diagrams.net with special URL parameters inside an iframe
  2. Send the diagram data to the iframe for editing
  3. Receive and save diagram data from the iframe
  4. Remove iframe
Storage formats
Depending on the requirements, a PNG or SVG image or the XML for the diagram can be used as the storage format. Consider the following when picking the storage format:
  • Images (PNG and SVG) should be used for fast loading with no initial delay. Embedding the diagram data for editing in PNG and SVG images can be used to avoid saving the image and diagram separately, but will result in bigger image files. When using a viewer or editor, images should be used to show a placeholder or preview.
  • SVG images should be used if hyperlinks and vector images are required. (The SVG output of diagrams.net uses foreign objects, which are not supported in IE11 and earlier.)
  • XML should be used if no image version of the diagram is required or to store the XML separately from the image. A viewer or editor is required to handle these files.
  • PNG images should be used if a bitmap image is required, to support IE11 and earlier or for special fonts.
The storage can be any persistence mechanism. The image or XML file can be stored and used in the output of the host application, such as an image tag, SVG DOM or HTML viewer. Authentication, file descriptors, revisions etc must be handled by the host application. All communication between the host application and diagrams.net happens on the client-side.
Protocol
The protocol specification describes the full messaging API.
The basic flow of the protocol is:
  1. Wait for init event
  2. Send load action
  3. Wait for save/exit event
In some cases, additional steps may be required to check for a draft state or to export the diagram as an image. Special messages are available in the protocol to show draft states or a template dialog.
Fonts, colors, default styles, libraries, CSS and more can be configured to match the environment and style of the host application by using the configure=1 URL parameter. See localstorage-svg.html.
Examples
Embed Mode
JavaScript API for editing embedded SVG and PNG images in an HTML page.
Inline Editing
Editing with embedInline mode and adapting embedded SVG images to dark mode.
Local Storage
Saving and loading diagrams to/from HTML5 local storage.
WebDAV
Roundtrip editing of diagrams stored on a WebDAV server.
Chrome Extension
A template Chrome extension (Manifest V3) for adding draw.io diagram support to any web application. Based on a production integration. Includes diagram detection, inline editor, dark mode support, and placeholder save handler ready to be connected to your app's API.
Related
About
draw.io Integration
Resources
Readme
Activity
Custom properties
Stars
276 stars
Watchers
9 watching
Forks
93 forks
Report repository
Releases
Packages
Used by
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
57 Commits
Folders and files
NameName
Last commit message
Last commit date
examples
examples
.gitignore
.gitignore
README.md
README.md
Repository files navigation
diagrams.net Integration
Integration, or "embed mode" is used for cases where the storage of the diagram is taken care of by a host application,
and diagrams.net is used for diagram editing. In this case, diagrams.net is used inside an iframe or window with special URL
parameters, and is remote controlled using the HTML5 Messaging API. Use embed.diagrams.net only for embed mode.
Basic flow
  1. Load embed.diagrams.net with special URL parameters inside an iframe
  2. Send the diagram data to the iframe for editing
  3. Receive and save diagram data from the iframe
  4. Remove iframe
Storage formats
Depending on the requirements, a PNG or SVG image or the XML for the diagram can be used as the storage format. Consider the following when picking the storage format:
  • Images (PNG and SVG) should be used for fast loading with no initial delay. Embedding the diagram data for editing in PNG and SVG images can be used to avoid saving the image and diagram separately, but will result in bigger image files. When using a viewer or editor, images should be used to show a placeholder or preview.
  • SVG images should be used if hyperlinks and vector images are required. (The SVG output of diagrams.net uses foreign objects, which are not supported in IE11 and earlier.)
  • XML should be used if no image version of the diagram is required or to store the XML separately from the image. A viewer or editor is required to handle these files.
  • PNG images should be used if a bitmap image is required, to support IE11 and earlier or for special fonts.
The storage can be any persistence mechanism. The image or XML file can be stored and used in the output of the host application, such as an image tag, SVG DOM or HTML viewer. Authentication, file descriptors, revisions etc must be handled by the host application. All communication between the host application and diagrams.net happens on the client-side.
Protocol
The protocol specification describes the full messaging API.
The basic flow of the protocol is:
  1. Wait for init event
  2. Send load action
  3. Wait for save/exit event
In some cases, additional steps may be required to check for a draft state or to export the diagram as an image. Special messages are available in the protocol to show draft states or a template dialog.
Fonts, colors, default styles, libraries, CSS and more can be configured to match the environment and style of the host application by using the configure=1 URL parameter. See localstorage-svg.html.
Examples
Embed Mode
JavaScript API for editing embedded SVG and PNG images in an HTML page.
Inline Editing
Editing with embedInline mode and adapting embedded SVG images to dark mode.
Local Storage
Saving and loading diagrams to/from HTML5 local storage.
WebDAV
Roundtrip editing of diagrams stored on a WebDAV server.
Chrome Extension
A template Chrome extension (Manifest V3) for adding draw.io diagram support to any web application. Based on a production integration. Includes diagram detection, inline editor, dark mode support, and placeholder save handler ready to be connected to your app's API.
Related
About
draw.io Integration
Resources
Readme
Activity
Custom properties
Stars
276 stars
Watchers
9 watching
Forks
93 forks
Report repository
Releases
Packages
Used by
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Latest commit
History
57 Commits
Folders and files
NameName
Last commit message
Last commit date
examples
examples
.gitignore
.gitignore
README.md
README.md
Repository files navigation
diagrams.net Integration
Integration, or "embed mode" is used for cases where the storage of the diagram is taken care of by a host application,
and diagrams.net is used for diagram editing. In this case, diagrams.net is used inside an iframe or window with special URL
parameters, and is remote controlled using the HTML5 Messaging API. Use embed.diagrams.net only for embed mode.
Basic flow
  1. Load embed.diagrams.net with special URL parameters inside an iframe
  2. Send the diagram data to the iframe for editing
  3. Receive and save diagram data from the iframe
  4. Remove iframe
Storage formats
Depending on the requirements, a PNG or SVG image or the XML for the diagram can be used as the storage format. Consider the following when picking the storage format:
  • Images (PNG and SVG) should be used for fast loading with no initial delay. Embedding the diagram data for editing in PNG and SVG images can be used to avoid saving the image and diagram separately, but will result in bigger image files. When using a viewer or editor, images should be used to show a placeholder or preview.
  • SVG images should be used if hyperlinks and vector images are required. (The SVG output of diagrams.net uses foreign objects, which are not supported in IE11 and earlier.)
  • XML should be used if no image version of the diagram is required or to store the XML separately from the image. A viewer or editor is required to handle these files.
  • PNG images should be used if a bitmap image is required, to support IE11 and earlier or for special fonts.
The storage can be any persistence mechanism. The image or XML file can be stored and used in the output of the host application, such as an image tag, SVG DOM or HTML viewer. Authentication, file descriptors, revisions etc must be handled by the host application. All communication between the host application and diagrams.net happens on the client-side.
Protocol
The protocol specification describes the full messaging API.
The basic flow of the protocol is:
  1. Wait for init event
  2. Send load action
  3. Wait for save/exit event
In some cases, additional steps may be required to check for a draft state or to export the diagram as an image. Special messages are available in the protocol to show draft states or a template dialog.
Fonts, colors, default styles, libraries, CSS and more can be configured to match the environment and style of the host application by using the configure=1 URL parameter. See localstorage-svg.html.
Examples
Embed Mode
JavaScript API for editing embedded SVG and PNG images in an HTML page.
Inline Editing
Editing with embedInline mode and adapting embedded SVG images to dark mode.
Local Storage
Saving and loading diagrams to/from HTML5 local storage.
WebDAV
Roundtrip editing of diagrams stored on a WebDAV server.
Chrome Extension
A template Chrome extension (Manifest V3) for adding draw.io diagram support to any web application. Based on a production integration. Includes diagram detection, inline editor, dark mode support, and placeholder save handler ready to be connected to your app's API.
Related
About
draw.io Integration
Resources
Readme
Activity
Custom properties
Stars
276 stars
Watchers
9 watching
Forks
93 forks
Report repository
Releases
Packages
Used by
Contributors