andyhome163 / draw-io-plugins

Index:

• 1. Plugins:
  • 1.1. Resize Cells (height & width by selected cell)
  • 1.2. ReOrder Childeren
  • 1.3. Google Fonts
  • 1.4. SecurIT Huisstijl
  • 1.5. Kubernetes K8 Icons
  • 1.6. Security Icons
  • 1.7. Cyberark Library
  • 1.8. Explore (WIP)
• 2. Install Plugin Within Draw-io
  • 2.1. Use of CORS Proxy:
    • 2.1.1. Cors Proxy information:
  • 2.2. Installation Steps (draw.io Online)
  • 2.3. For windows/macOS/linux draw.io desktop:

1. Plugins:

1.1. Resize Cells (height & width by selected cell)

This plugin enables u to resize a object within draw.io. To use it, select the object that is the right size(height & width), then select: Tool Resize -> Resize. All the same objects(same style as selected cell) will be resize to the same size of the selected object.

• Plugin URL: https://yacdn.org/serve/https://raw.githubusercontent.com/CoolZeroNL/draw-io-plugins/master/%23%20Draw-io-plugin-ReSize/draw-io-plugin-resize-v1.js?maxAge=10

1.2. ReOrder Childeren

This plugin enables u to reorder childeren of a root object within draw.io. To use it, select the root cell with the childeren you want to reoder, then select: Tool Reorder -> Reorder. All the childeren will now be Reodered under the root cell.

• Plugin URL: https://yacdn.org/serve/https://raw.githubusercontent.com/CoolZeroNL/draw-io-plugins/master/%23%20Draw-io-plugin-ReOrder/draw-io-plugin-reorder-childeren-v3.js?maxAge=10

1.3. Google Fonts

This plugin enables you the use of all the google fonts within draw.io.

I have added to the custom fonts "Roboto", "Open Sans" & "Libre Franklin". But you can load more if u want by entering the name of the font family in the Font -> Custom... option.

• Plugin URL: https://yacdn.org/serve/https://raw.githubusercontent.com/CoolZeroNL/draw-io-plugins/master/%23%20Draw-io-plugin-Google-Fonts/google-fonts-v1.js?maxAge=10

  • Will do:

    • Install all Google Fonts into Browser

  • Load Custom Fonts:

    • Libre Franklin
    • Roboto
    • Open Sans

    For the complete list of fonts: List of Google Fonts or fonts.google.com
    ** note that not all the fonts will work in draw.io.. like: Libre Barcode

    

1.4. SecurIT Huisstijl

• Plugin URL: https://yacdn.org/serve/https://raw.githubusercontent.com/CoolZeroNL/draw-io-plugins/master/%23%20Draw-io-plugin-SecurIT/draw-io-plugin-securit-huisstyle-v1.js?maxAge=10

  • Will Do:

    • Add Stencil:

      • SecurIT
      • Security

    • Load Custom Font:

      • Libre Franklin

    

1.5. Kubernetes K8 Icons

• Plugin URL: https://yacdn.org/serve/https://raw.githubusercontent.com/CoolZeroNL/draw-io-plugins/master/%23%20Draw-io-plugin-K8-Icons/draw-io-plugin-k8-icons-v1.js?maxAge=10

  • Will Do:

    • Add Stencil:
      • Kubernetes K8 Icons

    

1.6. Security Icons

• Plugin URL: https://yacdn.org/serve/https://raw.githubusercontent.com/CoolZeroNL/draw-io-plugins/master/%23%20Draw-io-plugin-Security-Icons/draw-io-plugin-security-icons-v1.js?maxAge=10

  • Will Do:

    • Add Stencil:
      • Security Icons

    

1.7. Cyberark Library

• Plugin URL: https://yacdn.org/serve/https://raw.githubusercontent.com/CoolZeroNL/draw-io-plugins/master/%23%20Draw-io-plugin-Cyberark-Library/draw-io-plugin-cyberark-library-v0.1.js?maxAge=10

  • Will Do:

    • Add Menu: Librarys

      • Add Submenu: Load Cyberark Librarys

    • Add Library:

      • Cyberark Icons

  After u have loaded the plugin, and u want want to load the Cyberark Librarys use the Menu -> Librarys -> Load CyberArk Librarys

  

1.8. Explore (WIP)

• Plugin URL: https://yacdn.org/serve/https://raw.githubusercontent.com/CoolZeroNL/draw-io-plugins/master/%23%20Draw-io-plugin-Explore/draw-io-plugin-explore-v1.js?maxAge=10

  • Todo:
    • [] add link as url in cell ( is now as tooltip )

2. Install Plugin Within Draw-io

2.1. Use of CORS Proxy:

Because the plugins are been included within draw.io the browser will block this, because the plugin is not on the same domain as draw.io is. So the browser will give the next error: Refused to execute script from 'https://raw.githubusercontent.com/CoolZeroNL/draw-io-plugins/master/draw-io-plugin-resize.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

To fix this u need to use a CORS proxy server, and the urls are:

https://yacdn.org/serve/ {raw.githubusercontent.com url} ?maxAge=10

2.1.1. Cors Proxy information:

https://ovsoinc.github.io/yacdn.org/

2.2. Installation Steps (draw.io Online)

To add a new plugin, do the next steps:

Go to Extras -> Plugins kbd:[File] -> kbd:[Save] -> kbd:[Option]

Click on Add

Paste the url of the wanted Plugin and click on Add

If you are done adding your wanted plugins, click Apply

You will get a warning, click Ok and refresh your draw.io page.

When using custom plugins, you will get a warning every times you open Draw.io, check if the plugin you want is listed here, and press Ok

Now you see a extra menu item Tool XX. As a sub item the plugin functionality will be availible.

2.3. For windows/macOS/linux draw.io desktop:

0. download Draw.io from the next location: https://about.draw.io/integrations/#integrations_offline

1. Download plugin file. eg: /Users/xxx/plugins/plugin.js

2. Add plugin in Plugin Panel URL: file:///Users/{username}/plugins/plugin.js

3. Apply and restart.

** Note that the plugins that load the resource fromt the inet dont work in the desktop version of Draw.io because the content is been block du security reasons.

** https://developer.chrome.com/apps/contentSecurityPolicy
** https://developer.chrome.com/apps/app_external#sandboxing

Supported Plugins:

• ReOrder Childeren
• Resize Cells (height & width by selected cell)