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)){vartemp=document.createElement("div");temp.innerHTML=Graph.sanitizeHtml(this.getLabel(cell));varlinks=temp.getElementsByTagName("a");varchanged=false;for(vari=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 labelsthis.graph.cellRenderer.getLabelValue=function(state){varresult=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);}}returnresult;};- Editor.convertHtmlToText
how to deal with such text
h1,h2 {
font-size:16pt;
}conststyleSheet=newCSSStyleSheet();styleSheet.replaceSync(cssText);console.log(styleSheet);constrenderPart=document.querySelector("docs-mad");for(construleofstyleSheet.cssRules){const{ selectorText }=rule;constelems=renderPart.querySelectorAll(selectorText);for(constelemofelems){conststyleDeclaration=rule.style;for(constpropertyofstyleDeclaration){elem.style[property]=styleDeclaration[property];}}}