rukshn / drawio-wysiwyg

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Draw.io Markdown Plugin

This draw.io plugins integrates the markdown generator.

Markdown supports:

different version support different function

Overview

  • Example

Usage

  • double click on a shape and edit the markdown script, the shape will be redrawn after leaving the editor

How to build

  1. git clone --recursive https://github.com/nopeslide/drawio_markdown_plugin.git ~/drawio_markdown_plugin
  2. cd ~/drawio_markdown_plugin/drawio_desktop
  3. npm install
  4. npm run build

How to install

  1. open draw.io desktop
  2. select on the top menu bar Extras/Plugins...
  3. click Add
  4. click Select File... for External Plugins:
  5. select ~/drawio_markdown_plugin/drawio_desktop/dist/markdown-plugin.webpack.js
  6. click OK
  7. click Apply
  8. 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:

  1. run ln -sfr ~/drawio_markdown_plugin/drawio_desktop/dist/markdown-plugin.webpack.js ~/.config/draw.io/plugins/

API

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;
};

References

About


Languages

Language:JavaScript 97.7%Language:TypeScript 2.3%