This draw.io plugins integrates the markdown generator.
Markdown supports:
different version support different function
-
Example
- double click on a shape and edit the markdown script, the shape will be redrawn after leaving the editor
git clone --recursive https://github.com/nopeslide/drawio_markdown_plugin.git ~/drawio_markdown_plugincd ~/drawio_markdown_plugin/drawio_desktopnpm installnpm run build
- open draw.io desktop
- select on the top menu bar
Extras/Plugins... - click
Add - click
Select File...forExternal Plugins: - select
~/drawio_markdown_plugin/drawio_desktop/dist/markdown-plugin.webpack.js - click
OK - click
Apply - confirm Dialog
copy the code in the dist/
Draw.io copies the plugin into an internal directory, making updates impossible!
To link the plugin with the repository:
- run
ln -sfr ~/drawio_markdown_plugin/drawio_desktop/dist/markdown-plugin.webpack.js ~/.config/draw.io/plugins/
copy from drawio source code
if (this.isHtmlLabel(cell)) {
var temp = document.createElement("div");
temp.innerHTML = Graph.sanitizeHtml(this.getLabel(cell));
var links = temp.getElementsByTagName("a");
var changed = false;
for (var i = 0; i < links.length; i++) {
href = links[i].getAttribute("href");
if (href != null && href.substring(0, 17) == "data:action/json,") {
links[i].setAttribute("href", this.updateCustomLink(mapping, href));
changed = true;
}
}
if (changed) {
this.labelChanged(cell, temp.innerHTML);
}
}// HTML entities are displayed as plain text in wrapped plain text labels
this.graph.cellRenderer.getLabelValue = function (state) {
var result = mxCellRenderer.prototype.getLabelValue.apply(this, arguments);
if (state.view.graph.isHtmlLabel(state.cell)) {
if (state.style["html"] != 1) {
result = mxUtils.htmlEntities(result, false);
} else {
result = Graph.sanitizeHtml(result);
}
}
return result;
};- Editor.convertHtmlToText
how to deal with such text
h1,
h2 {
font-size: 16pt;
}const styleSheet = new CSSStyleSheet();
styleSheet.replaceSync(cssText);
console.log(styleSheet);
const renderPart = document.querySelector("docs-mad");
for (const rule of styleSheet.cssRules) {
const { selectorText } = rule;
const elems = renderPart.querySelectorAll(selectorText);
for (const elem of elems) {
const styleDeclaration = rule.style;
for (const property of styleDeclaration) {
elem.style[property] = styleDeclaration[property];
}
}
}