Skip to content

Instantly share code, notes, and snippets.

@ThomasRohde

ThomasRohde/Explore model.ajs

Last active July 23, 2023 10:41
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasRohde/eaeb5900756954b0b768e58fe0d247d2 to your computer and use it in GitHub Desktop.
Save ThomasRohde/eaeb5900756954b0b768e58fe0d247d2 to your computer and use it in GitHub Desktop.
Download ZIP
Visually explore the entire model #JArchi #Archimatetool #Archi
Raw
Explore model.ajs
/*
Author: Thomas Klok Rohde
Description:
Explore the entire model
Dependencies:
- Vis Network: https://github.com/visjs/vis-network.
- Bootstrap CSS
- A modern webbrowser with support for the DIALOG element
History:
November 27, 2022 : Created
November 28, 2022 : Added edge labels, and an option to remove 'orphans' from the network
*/
console.show();
console.clear();
const BrowserEditorInput = Java.type('com.archimatetool.editor.browser.BrowserEditorInput');
const IBrowserEditor = Java.type('com.archimatetool.editor.browser.IBrowserEditor');
const EditorManager = Java.type('com.archimatetool.editor.ui.services.EditorManager');
try {
$("*")
} catch (error) {
window.alert("No model selected, or model empty");
}
let shapeOptions = {
"application-collaboration": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(181,255,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(181,255,255)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(126,178,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(126,178,178)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><circle fill="none" r="5" clip-path="url(#clipPath1)" cx="117" cy="22" stroke="black" /><circle fill="none" r="5" clip-path="url(#clipPath1)" cx="121" cy="22" stroke="black" /></g ></g></svg>`) },
"application-component": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(181,255,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(181,255,255)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(126,178,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(126,178,178)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><path fill="none" d="M115 29 L115 25 M115 23 L115 21 M115 18 L115 16 L125 16 L125 29 L114.5 29 M112 18 L118 18 L118 20.5 L112 20.5 ZM112 23 L118 23 L118 25.5 L112 25.5 Z" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"application-event": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(181,255,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(181,255,255)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(126,178,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(126,178,178)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><path fill="none" d="M110 26 C112.2091 26 114 23.9853 114 21.5 C114 19.0147 112.2091 17 110 17 C110 17 110 17 110 17" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /><path fill="none" d="M122 26 C124.2091 26 126 23.9853 126 21.5 C126 19.0147 124.2091 17 122 17 C122 17 122 17 122 17 M110 17 L122 17 M110 26 L122 26" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"application-function": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(181,255,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(181,255,255)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(126,178,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(126,178,178)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><polygon fill="none" clip-path="url(#clipPath1)" points=" 112 29 112 20 118 15 124 20 124 29 118 23" stroke="black" /></g ></g></svg>`) },
"application-interaction": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(181,255,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(181,255,255)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(126,178,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(126,178,178)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><path fill="none" d="M117 16 C114.2386 16 112 18.6863 112 22 C112 25.3137 114.2386 28 117 28 L117 15.5" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /><path fill="none" d="M120 28 C122.7614 28 125 25.3137 125 22 C125 18.6863 122.7614 16 120 16 C120 16 120 16 120 16 L120 28.5" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"application-interface": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(181,255,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(181,255,255)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(126,178,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(126,178,178)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><circle fill="none" r="5" clip-path="url(#clipPath1)" cx="121" cy="23" stroke="black" /><line clip-path="url(#clipPath1)" fill="none" x1="116" x2="109" y1="23" y2="23" stroke="black" /></g ></g></svg>`) },
"application-process": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(181,255,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(181,255,255)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(126,178,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(126,178,178)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><polygon fill="none" clip-path="url(#clipPath1)" points=" 112 21 120 21 120 18 126 23 120 28 120 25 112 25" stroke="black" /></g ></g></svg>`) },
"application-service": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(181,255,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(181,255,255)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(126,178,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(126,178,178)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><rect x="109" y="17" clip-path="url(#clipPath1)" fill="none" width="16" rx="4" ry="4" height="9" stroke="black" /></g ></g></svg>`) },
"artifact": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(201,231,183)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(201,231,183)" stroke-width="0" stroke-miterlimit="0" ><path d="M10 10 L111 10 L129 28 L129 64 L10 64 Z" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /><path fill="rgb(180,207,164)" d="M111 10 L129 28 L111 28" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><path fill="none" d="M10 10 L111 10 L129 28 L129 64 L10 64 Z" fill-rule="evenodd" clip-path="url(#clipPath1)" /><path fill="none" d="M129 28 L111 28 L111 10" clip-path="url(#clipPath1)" fill-rule="evenodd" /></g ></g></svg>`) },
"assessment": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(204,204,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(204,204,255)" stroke-width="0" stroke-miterlimit="0" ><path d="M20 10 L119 10 L129 20 L129 54 L119 64 L20 64 L10 54 L10 20 L20 10" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(142,142,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(142,142,178)" ><polygon fill="none" points=" 20 10 119 10 129 20 129 54 119 64 20 64 10 54 10 20" clip-path="url(#clipPath1)" /><circle fill="none" r="4" clip-path="url(#clipPath1)" cx="119" cy="20" stroke="black" /><line clip-path="url(#clipPath1)" fill="none" x1="117" x2="112" y1="23" y2="28" stroke="black" /></g ></g></svg>`) },
"business-actor": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,255,181)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,255,181)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(178,178,126)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,178,126)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><circle fill="none" r="3" clip-path="url(#clipPath1)" cx="120" cy="17" stroke="black" /><line clip-path="url(#clipPath1)" fill="none" x1="120" x2="120" y1="20" y2="26" stroke="black" /><line clip-path="url(#clipPath1)" fill="none" x1="120" x2="116" y1="26" y2="31" stroke="black" /><line clip-path="url(#clipPath1)" fill="none" x1="120" x2="124" y1="26" y2="31" stroke="black" /><line clip-path="url(#clipPath1)" fill="none" x1="116" x2="124" y1="23" y2="23" stroke="black" /></g ></g></svg>`) },
"business-collaboration": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,255,181)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,255,181)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(178,178,126)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,178,126)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><circle fill="none" r="5" clip-path="url(#clipPath1)" cx="117" cy="22" stroke="black" /><circle fill="none" r="5" clip-path="url(#clipPath1)" cx="121" cy="22" stroke="black" /></g ></g></svg>`) },
"business-event": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,255,181)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,255,181)" stroke-width="0" stroke-miterlimit="0" ><path d="M10 10 L28 36 L10 64 L111 64 C120.9411 64 129 51.9117 129 37 C129 22.0883 120.9411 10 111 10 C111 10 111 10 111 10 L10 10 L28 36" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(178,178,126)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,178,126)" ><path fill="none" d="M10 10 L28 36 L10 64 L111 64 C120.9411 64 129 51.9117 129 37 C129 22.0883 120.9411 10 111 10 C111 10 111 10 111 10 L10 10 L28 36" fill-rule="evenodd" clip-path="url(#clipPath1)" /></g ></g></svg>`) },
"business-function": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,255,181)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,255,181)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(178,178,126)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,178,126)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><polygon fill="none" clip-path="url(#clipPath1)" points=" 112 29 112 20 118 15 124 20 124 29 118 23" stroke="black" /></g ></g></svg>`) },
"business-interaction": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,255,181)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,255,181)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(178,178,126)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,178,126)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><path fill="none" d="M117 16 C114.2386 16 112 18.6863 112 22 C112 25.3137 114.2386 28 117 28 L117 15.5" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /><path fill="none" d="M120 28 C122.7614 28 125 25.3137 125 22 C125 18.6863 122.7614 16 120 16 C120 16 120 16 120 16 L120 28.5" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"business-interface": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,255,181)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,255,181)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(178,178,126)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,178,126)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><circle fill="none" r="5" clip-path="url(#clipPath1)" cx="121" cy="23" stroke="black" /><line clip-path="url(#clipPath1)" fill="none" x1="116" x2="109" y1="23" y2="23" stroke="black" /></g ></g></svg>`) },
"business-object": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,255,181)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,255,181)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(178,178,126)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,178,126)" ><line y2="22" fill="none" x1="10" clip-path="url(#clipPath1)" x2="129" y1="22" /><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /></g ></g></svg>`) },
"business-process": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,255,181)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,255,181)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(178,178,126)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,178,126)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><polygon fill="none" clip-path="url(#clipPath1)" points=" 112 21 120 21 120 18 126 23 120 28 120 25 112 25" stroke="black" /></g ></g></svg>`) },
"business-role": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,255,181)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,255,181)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(178,178,126)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,178,126)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><path fill="none" d="M114.5 17 C113.1193 17 112 18.7909 112 21 C112 23.2091 113.1193 25 114.5 25 L124 25 M114 17 L124 17" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /><ellipse clip-path="url(#clipPath1)" fill="none" rx="2.5" cx="124.5" ry="4" cy="21" stroke="black" /></g ></g></svg>`) },
"business-service": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,255,181)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,255,181)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="27.5" ry="27.5" height="54" stroke="none" /></g ><g fill="rgb(178,178,126)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,178,126)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="27.5" ry="27.5" height="54" /></g ></g></svg>`) },
"capability": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(245,222,170)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(245,222,170)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(171,155,119)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(171,155,119)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><rect x="121" y="15" clip-path="url(#clipPath1)" fill="none" width="4" height="4" stroke="black" /><rect x="117" y="19" clip-path="url(#clipPath1)" fill="none" width="4" height="4" stroke="black" /><rect x="121" y="19" clip-path="url(#clipPath1)" fill="none" width="4" height="4" stroke="black" /><rect x="113" y="23" clip-path="url(#clipPath1)" fill="none" width="4" height="4" stroke="black" /><rect x="117" y="23" clip-path="url(#clipPath1)" fill="none" width="4" height="4" stroke="black" /><rect x="121" y="23" clip-path="url(#clipPath1)" fill="none" width="4" height="4" stroke="black" /></g ></g></svg>`) },
"communication-network": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(201,231,183)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(201,231,183)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><path fill="none" d="M115 26.5 C115 25.1193 113.8807 24 112.5 24 C111.1193 24 110 25.1193 110 26.5 C110 27.8807 111.1193 29 112.5 29 C113.8807 29 115 27.8807 115 26.5 ZM117 18.5 C117 17.1193 115.8807 16 114.5 16 C113.1193 16 112 17.1193 112 18.5 C112 19.8807 113.1193 21 114.5 21 C115.8807 21 117 19.8807 117 18.5 ZM125 18.5 C125 17.1193 123.8807 16 122.5 16 C121.1193 16 120 17.1193 120 18.5 C120 19.8807 121.1193 21 122.5 21 C123.8807 21 125 19.8807 125 18.5 ZM123 26.5 C123 25.1193 121.8807 24 120.5 24 C119.1193 24 118 25.1193 118 26.5 C118 27.8807 119.1193 29 120.5 29 C121.8807 29 123 27.8807 123 26.5 ZM113 24 L114 21 M121 24 L122 21 M115 26.5 L118 26.5 M117 18.5 L120 18.5" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"constraint": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(204,204,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(204,204,255)" stroke-width="0" stroke-miterlimit="0" ><path d="M20 10 L119 10 L129 20 L129 54 L119 64 L20 64 L10 54 L10 20 L20 10" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(142,142,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(142,142,178)" ><polygon fill="none" points=" 20 10 119 10 129 20 129 54 119 64 20 64 10 54 10 20" clip-path="url(#clipPath1)" /><polygon fill="none" clip-path="url(#clipPath1)" points=" 112 18 124 18 120 27 108 27" stroke="black" /><line clip-path="url(#clipPath1)" fill="none" x1="116" x2="112" y1="18" y2="27" stroke="black" /></g ></g></svg>`) },
"contract": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,255,181)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,255,181)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(178,178,126)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,178,126)" ><line y2="22" fill="none" x1="10" clip-path="url(#clipPath1)" x2="129" y1="22" /><line y2="52" fill="none" x1="10" clip-path="url(#clipPath1)" x2="129" y1="52" /><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /></g ></g></svg>`) },
"course-of-action": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(245,222,170)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(245,222,170)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(171,155,119)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(171,155,119)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><path fill="black" d="M107.6 22 L113.6 23 L110.6 28.2" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="none" /><path fill="none" d="M110.5 25 C108.0735 25 105.9973 26.7422 105.576 29.1318" stroke-width="2" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /><path fill="none" d="M126 19.5 C126 15.9101 123.0898 13 119.5 13 C115.9101 13 113 15.9102 113 19.5 C113 23.0899 115.9101 26 119.5 26 C123.0899 26 126 23.0898 126 19.5 ZM123.5 19.5 C123.5 17.2909 121.7091 15.5 119.5 15.5 C117.2909 15.5 115.5 17.2909 115.5 19.5 C115.5 21.7091 117.2909 23.5 119.5 23.5 C121.7091 23.5 123.5 21.7091 123.5 19.5 ZM121 19.5 C121 18.6716 120.3284 18 119.5 18 C118.6716 18 118 18.6716 118 19.5 C118 20.3284 118.6716 21 119.5 21 C120.3284 21 121 20.3284 121 19.5 ZM120 19.5 C120 19.2239 119.7761 19 119.5 19 C119.2239 19 119 19.2239 119 19.5 C119 19.7761 119.2239 20 119.5 20 C119.7761 20 120 19.7761 120 19.5 Z" stroke-width="1.2" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"data-object": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(181,255,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(181,255,255)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(126,178,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(126,178,178)" ><line y2="22" fill="none" x1="10" clip-path="url(#clipPath1)" x2="129" y1="22" /><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /></g ></g></svg>`) },
"deliverable": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,224,224)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,224,224)" stroke-width="0" stroke-miterlimit="0" ><path d="M10 10 L10 52 C29.3333 67.3333 49.3333 67.6667 70 53 C90 45 109.6667 45 129 53 L129 10" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(178,156,156)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,156,156)" ><path fill="none" d="M10 10 L10 52 C29.3333 67.3333 49.3333 67.6667 70 53 C90 45 109.6667 45 129 53 L129 10 L9.5 10" fill-rule="evenodd" clip-path="url(#clipPath1)" /></g ></g></svg>`) },
"device": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(180,207,164)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(180,207,164)" stroke-width="0" stroke-miterlimit="0" ><path d="M10 64 L26 55 L114 55 L129 64 L10 64" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><line y2="64" fill="none" x1="10" clip-path="url(#clipPath1)" x2="129" y1="64" /><line y2="55" fill="none" x1="10" clip-path="url(#clipPath1)" x2="26" y1="64" /><line y2="55" fill="none" x1="129" clip-path="url(#clipPath1)" x2="115" y1="64" /><rect x="10" y="10" clip-path="url(#clipPath1)" fill="rgb(201,231,183)" width="119" rx="15" ry="15" height="45" stroke="none" /><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="15" ry="15" height="45" /></g ></g></svg>`) },
"distribution-network": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(201,231,183)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(201,231,183)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><path fill="none" d="M111 20 L124 20 M111 24 L124 24" stroke-width="1.5" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /><path fill="none" d="M114 17 L109 22 L114 27 M121 17 L126 22 L121 27" stroke-width="1.5" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"driver": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(204,204,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(204,204,255)" stroke-width="0" stroke-miterlimit="0" ><path d="M20 10 L119 10 L129 20 L129 54 L119 64 L20 64 L10 54 L10 20 L20 10" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(142,142,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(142,142,178)" ><polygon fill="none" points=" 20 10 119 10 129 20 129 54 119 64 20 64 10 54 10 20" clip-path="url(#clipPath1)" /><path fill="none" d="M122 22.5 C122 18.9101 119.0898 16 115.5 16 C111.9101 16 109 18.9102 109 22.5 C109 26.0899 111.9101 29 115.5 29 C119.0899 29 122 26.0898 122 22.5 ZM117 22.5 C117 21.6716 116.3284 21 115.5 21 C114.6716 21 114 21.6716 114 22.5 C114 23.3284 114.6716 24 115.5 24 C116.3284 24 117 23.3284 117 22.5 ZM116 22.5 C116 22.2239 115.7761 22 115.5 22 C115.2239 22 115 22.2239 115 22.5 C115 22.7761 115.2239 23 115.5 23 C115.7761 23 116 22.7761 116 22.5 Z" stroke-width="1.2" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /><path fill="none" d="M107 22.5 L124 22.5 M115.5 14 L115.5 31 M109.5 16.5 L121.5 28.5 M109.5 28.5 L121.5 16.5" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"equipment": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(180,207,164)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(180,207,164)" stroke-width="0" stroke-miterlimit="0" ><path d="M10 24 L24 10 L129 10 L129 50 L115 64 L10 64" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /><rect x="10" y="24" clip-path="url(#clipPath1)" fill="rgb(201,231,183)" width="105" height="40" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><path fill="none" d="M10 24 L24 10 L129 10 L129 50 L115 64 L10 64 L10 24 L115 24 L129 10 M115 24 L115 64" fill-rule="evenodd" clip-path="url(#clipPath1)" /><polygon fill="none" clip-path="url(#clipPath1)" points=" 110 44 112 44 112 42 110 42 109 40 110 38 109 37 107 38 105 37 105 35 103 35 103 37 101 38 99 37 98 38 99 40 98 42 96 42 96 44 98 44 99 46 98 48 99 49 101 48 103 49 103 51 105 51 105 49 107 48 109 49 110 48 109 46" stroke="black" /><path fill="none" d="M107 43 C107 41.3431 105.6569 40 104 40 C102.3431 40 101 41.3431 101 43 C101 44.6569 102.3431 46 104 46 C105.6569 46 107 44.6568 107 43 Z" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /><polygon fill="none" clip-path="url(#clipPath1)" points=" 113 33 114 33 114 31 113 31 112 29 112 28 111 27 110 28 108 28 107 27 106 28 106 29 105 31 104 31 104 33 105 33 106 35 106 36 107 37 108 36 110 36 111 37 112 36 112 35" stroke="black" /><path fill="none" d="M111 32 C111 30.8954 110.1046 30 109 30 C107.8954 30 107 30.8954 107 32 C107 33.1046 107.8954 34 109 34 C110.1046 34 111 33.1046 111 32 Z" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"facility": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(180,207,164)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(180,207,164)" stroke-width="0" stroke-miterlimit="0" ><path d="M10 24 L24 10 L129 10 L129 50 L115 64 L10 64" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /><rect x="10" y="24" clip-path="url(#clipPath1)" fill="rgb(201,231,183)" width="105" height="40" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><path fill="none" d="M10 24 L24 10 L129 10 L129 50 L115 64 L10 64 L10 24 L115 24 L129 10 M115 24 L115 64" fill-rule="evenodd" clip-path="url(#clipPath1)" /><polygon fill="none" stroke-width="1.2" clip-path="url(#clipPath1)" points=" 96 40 111 40 111 34 107 37 107 34 103 37 103 34 99 37 99 28 96 28" stroke="black" /></g ></g></svg>`) },
"gap": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(224,255,224)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(224,255,224)" stroke-width="0" stroke-miterlimit="0" ><path d="M10 10 L10 52 C29.3333 67.3333 49.3333 67.6667 70 53 C90 45 109.6667 45 129 53 L129 10" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(156,178,156)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(156,178,156)" ><path fill="none" d="M10 10 L10 52 C29.3333 67.3333 49.3333 67.6667 70 53 C90 45 109.6667 45 129 53 L129 10 L9.5 10" fill-rule="evenodd" clip-path="url(#clipPath1)" /><circle fill="none" r="6.5" clip-path="url(#clipPath1)" cx="116.5" cy="22.5" stroke="black" /><line clip-path="url(#clipPath1)" fill="none" x1="108" x2="125" y1="21" y2="21" stroke="black" /><line clip-path="url(#clipPath1)" fill="none" x1="108" x2="125" y1="24" y2="24" stroke="black" /></g ></g></svg>`) },
"goal": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(204,204,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(204,204,255)" stroke-width="0" stroke-miterlimit="0" ><path d="M20 10 L119 10 L129 20 L129 54 L119 64 L20 64 L10 54 L10 20 L20 10" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(142,142,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(142,142,178)" ><polygon fill="none" points=" 20 10 119 10 129 20 129 54 119 64 20 64 10 54 10 20" clip-path="url(#clipPath1)" /><path fill="none" d="M123 22.5 C123 18.9101 120.0898 16 116.5 16 C112.9101 16 110 18.9102 110 22.5 C110 26.0899 112.9101 29 116.5 29 C120.0899 29 123 26.0898 123 22.5 ZM120.5 22.5 C120.5 20.2909 118.7091 18.5 116.5 18.5 C114.2909 18.5 112.5 20.2909 112.5 22.5 C112.5 24.7091 114.2909 26.5 116.5 26.5 C118.7091 26.5 120.5 24.7091 120.5 22.5 ZM118 22.5 C118 21.6716 117.3284 21 116.5 21 C115.6716 21 115 21.6716 115 22.5 C115 23.3284 115.6716 24 116.5 24 C117.3284 24 118 23.3284 118 22.5 ZM117 22.5 C117 22.2239 116.7761 22 116.5 22 C116.2239 22 116 22.2239 116 22.5 C116 22.7761 116.2239 23 116.5 23 C116.7761 23 117 22.7761 117 22.5 Z" stroke-width="1.2" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"grouping": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="white" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="white" stroke-width="0" stroke-miterlimit="0" ><path d="M10 10 L129 10 L129 64 L10 64 L10 10" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(178,178,178)" text-rendering="optimizeLegibility" stroke-dasharray="8,4" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,178,178)" ><polygon fill="none" points=" 10 10 129 10 129 64 10 64" clip-path="url(#clipPath1)" /></g ></g></svg>`) },
"implementation-event": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,224,224)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,224,224)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(178,156,156)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,156,156)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><path fill="none" d="M110 26 C112.2091 26 114 23.9853 114 21.5 C114 19.0147 112.2091 17 110 17 C110 17 110 17 110 17" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /><path fill="none" d="M122 26 C124.2091 26 126 23.9853 126 21.5 C126 19.0147 124.2091 17 122 17 C122 17 122 17 122 17 M110 17 L122 17 M110 26 L122 26" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"location": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(251,184,117)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(251,184,117)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(175,128,81)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(175,128,81)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><path fill="none" d="M124.6985 21.7101 C125.6429 19.1152 124.305 16.246 121.7101 15.3015 C119.1152 14.3571 116.246 15.695 115.3015 18.2899 C114.8995 19.3945 114.8995 20.6055 115.3015 21.7101 L120 30 Z" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"material": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(201,231,183)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(201,231,183)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><polygon fill="none" stroke-width="1.2" clip-path="url(#clipPath1)" points=" 122 15 114 15 110 22 113 29 122 29 126 22" stroke="black" /><path fill="none" d="M116 17 L112.7 22.5 M114.3 26.5 L121 26.5 M123 22.5 L120 17" stroke-width="1.2" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"meaning": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(204,204,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(204,204,255)" stroke-width="0" stroke-miterlimit="0" ><path d="M90 28 C90 18.0589 72.0914 10 50 10 C27.9086 10 10 18.0589 10 28 C10 37.9411 27.9086 46 50 46 C72.0914 46 90 37.9411 90 28 Z" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /><path d="M129 28 C129 18.0589 111.0914 10 89 10 C66.9086 10 49 18.0589 49 28 C49 37.9411 66.9086 46 89 46 C111.0914 46 129 37.9411 129 28 Z" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="none" /><path d="M82 45.5 C82 35.835 65.8822 28 46 28 C26.1177 28 10 35.835 10 45.5 C10 55.165 26.1178 63 46 63 C65.8823 63 82 55.165 82 45.5 Z" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="none" /><path d="M122 41 C122 31.0589 105.8822 23 86 23 C66.1177 23 50 31.0589 50 41 C50 50.9411 66.1178 59 86 59 C105.8823 59 122 50.9411 122 41 Z" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="none" /></g ><g fill="rgb(142,142,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(142,142,178)" ><path fill="none" d="M70 12.4115 C50.8683 7.441 26.4046 10.3907 15.359 19 C8.3382 24.4721 8.2078 31.2002 15.0152 36.7266" fill-rule="evenodd" clip-path="url(#clipPath1)" /><path fill="none" d="M120.5204 39.0819 C134.1212 31.2482 131.0347 19.9362 113.6264 13.8158 C100.9777 9.3688 83.6466 8.755 69.6076 12.2569" clip-path="url(#clipPath1)" fill-rule="evenodd" /><path fill="none" d="M73.1695 56.981 C60.1256 64.2753 37.3872 65.0482 22.3819 58.7074 C9.0174 53.06 6.0864 43.5265 15.4703 36.2264" clip-path="url(#clipPath1)" fill-rule="evenodd" /><path fill="none" d="M121.7316 38.8063 C124.1547 48.6734 110.1214 57.6543 90.3874 58.8658 C84.1151 59.2509 77.7507 58.8037 71.9337 57.5691" clip-path="url(#clipPath1)" fill-rule="evenodd" /></g ></g></svg>`) },
"node": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(180,207,164)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(180,207,164)" stroke-width="0" stroke-miterlimit="0" ><path d="M10 24 L24 10 L129 10 L129 50 L115 64 L10 64" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /><rect x="10" y="24" clip-path="url(#clipPath1)" fill="rgb(201,231,183)" width="105" height="40" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><path fill="none" d="M10 24 L24 10 L129 10 L129 50 L115 64 L10 64 L10 24 L115 24 L129 10 M115 24 L115 64" fill-rule="evenodd" clip-path="url(#clipPath1)" /></g ></g></svg>`) },
"outcome": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(204,204,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(204,204,255)" stroke-width="0" stroke-miterlimit="0" ><path d="M20 10 L119 10 L129 20 L129 54 L119 64 L20 64 L10 54 L10 20 L20 10" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(142,142,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(142,142,178)" ><polygon fill="none" points=" 20 10 119 10 129 20 129 54 119 64 20 64 10 54 10 20" clip-path="url(#clipPath1)" /><path fill="none" d="M118 25.5 C118 21.9101 115.0898 19 111.5 19 C107.9101 19 105 21.9102 105 25.5 C105 29.0899 107.9101 32 111.5 32 C115.0899 32 118 29.0898 118 25.5 ZM115.5 25.5 C115.5 23.2909 113.7091 21.5 111.5 21.5 C109.2909 21.5 107.5 23.2909 107.5 25.5 C107.5 27.7091 109.2909 29.5 111.5 29.5 C113.7091 29.5 115.5 27.7091 115.5 25.5 ZM113 25.5 C113 24.6716 112.3284 24 111.5 24 C110.6716 24 110 24.6716 110 25.5 C110 26.3284 110.6716 27 111.5 27 C112.3284 27 113 26.3284 113 25.5 ZM112 25.5 C112 25.2239 111.7761 25 111.5 25 C111.2239 25 111 25.2239 111 25.5 C111 25.7761 111.2239 26 111.5 26 C111.7761 26 112 25.7761 112 25.5 Z" stroke-width="1.2" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /><path fill="none" d="M111 26 L120.5 16.5 M118 19 L119 14 M118 19 L123 18" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"path": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(201,231,183)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(201,231,183)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><path fill="none" d="M112.5 22 L114.5 22 M116.5 22 L118.5 22 M120.5 22 L122.5 22" stroke-width="1.5" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /><path fill="none" d="M114 17 L109 22 L114 27 M121 17 L126 22 L121 27" stroke-width="1.5" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"plateau": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(201,229,201)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(201,229,201)" stroke-width="0" stroke-miterlimit="0" ><path d="M10 24 L24 10 L129 10 L129 50 L115 64 L10 64" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /><rect x="10" y="24" clip-path="url(#clipPath1)" fill="rgb(224,255,224)" width="105" height="40" stroke="none" /></g ><g fill="rgb(156,178,156)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(156,178,156)" ><path fill="none" d="M10 24 L24 10 L129 10 L129 50 L115 64 L10 64 L10 24 L115 24 L129 10 M115 24 L115 64" fill-rule="evenodd" clip-path="url(#clipPath1)" /><line clip-path="url(#clipPath1)" fill="none" x1="96" x2="108" y1="39" y2="39" stroke="black" stroke-width="2" /><line clip-path="url(#clipPath1)" fill="none" x1="98" x2="110" y1="36" y2="36" stroke="black" stroke-width="2" /><line clip-path="url(#clipPath1)" fill="none" x1="100" x2="112" y1="33" y2="33" stroke="black" stroke-width="2" /></g ></g></svg>`) },
"principle": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(204,204,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(204,204,255)" stroke-width="0" stroke-miterlimit="0" ><path d="M20 10 L119 10 L129 20 L129 54 L119 64 L20 64 L10 54 L10 20 L20 10" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(142,142,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(142,142,178)" ><polygon fill="none" points=" 20 10 119 10 129 20 129 54 119 64 20 64 10 54 10 20" clip-path="url(#clipPath1)" /><rect x="110" y="16" clip-path="url(#clipPath1)" fill="none" width="12" rx="2" ry="2" height="14" stroke="black" /><path fill="none" d="M115.5 18 L115.5 25 M116.5 18 L116.5 25 M115.5 26.5 L115.5 28.5 M116.5 26.5 L116.5 28.5" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"product": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,255,181)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,255,181)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(178,178,126)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,178,126)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><path fill="none" d="M10 22 L69 22 L69 10" clip-path="url(#clipPath1)" fill-rule="evenodd" /></g ></g></svg>`) },
"representation": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,255,181)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,255,181)" stroke-width="0" stroke-miterlimit="0" ><path d="M10 10 L10 57 C29.3333 65.6667 49.3333 66 70 58 C90 53.3333 109.6667 53.3333 129 58 L129 10" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(178,178,126)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,178,126)" ><path fill="none" d="M10 10 L10 57 C29.3333 65.6667 49.3333 66 70 58 C90 53.3333 109.6667 53.3333 129 58 L129 10 L9.5 10" fill-rule="evenodd" clip-path="url(#clipPath1)" /><line y2="22" fill="none" x1="10" clip-path="url(#clipPath1)" x2="129" y1="22" /></g ></g></svg>`) },
"requirement": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(204,204,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(204,204,255)" stroke-width="0" stroke-miterlimit="0" ><path d="M20 10 L119 10 L129 20 L129 54 L119 64 L20 64 L10 54 L10 20 L20 10" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(142,142,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(142,142,178)" ><polygon fill="none" points=" 20 10 119 10 129 20 129 54 119 64 20 64 10 54 10 20" clip-path="url(#clipPath1)" /><polygon fill="none" clip-path="url(#clipPath1)" points=" 112 18 124 18 120 27 108 27" stroke="black" /></g ></g></svg>`) },
"resource": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(245,222,170)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(245,222,170)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(171,155,119)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(171,155,119)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><rect x="110" y="17" clip-path="url(#clipPath1)" fill="none" width="15" rx="1.5" ry="1.5" height="10" stroke="black" /><rect x="125" y="20" clip-path="url(#clipPath1)" fill="none" width="2" rx="0.5" ry="0.5" height="4" stroke="black" /><path fill="none" d="M113 19 L113 25 M116 19 L116 25 M119 19 L119 25" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"stakeholder": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(204,204,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(204,204,255)" stroke-width="0" stroke-miterlimit="0" ><path d="M20 10 L119 10 L129 20 L129 54 L119 64 L20 64 L10 54 L10 20 L20 10" fill-rule="evenodd" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(142,142,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(142,142,178)" ><polygon fill="none" points=" 20 10 119 10 129 20 129 54 119 64 20 64 10 54 10 20" clip-path="url(#clipPath1)" /><path fill="none" d="M113 19 C110.7909 19 109 20.567 109 22.5 C109 24.433 110.7909 26 113 26 L120 26 M112.5 19 L120 19" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /><circle fill="none" r="3.5" clip-path="url(#clipPath1)" cx="120.5" cy="22.5" stroke="black" /></g ></g></svg>`) },
"system-software": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(201,231,183)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(201,231,183)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><path fill="none" d="M117.5 18 C114.4624 18 112 20.4624 112 23.5 C112 26.5376 114.4624 29 117.5 29 C120.5376 29 123 26.5376 123 23.5 C123 20.4624 120.5376 18 117.5 18 ZM122.25 26.2631 C124.8806 24.7444 125.7819 21.3806 124.2631 18.75 C122.7444 16.1194 119.3806 15.2181 116.75 16.7369 C115.9139 17.2196 115.2196 17.9139 114.7369 18.75" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"technology-collaboration": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(201,231,183)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(201,231,183)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><circle fill="none" r="5" clip-path="url(#clipPath1)" cx="117" cy="22" stroke="black" /><circle fill="none" r="5" clip-path="url(#clipPath1)" cx="121" cy="22" stroke="black" /></g ></g></svg>`) },
"technology-event": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(201,231,183)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(201,231,183)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><path fill="none" d="M110 26 C112.2091 26 114 23.9853 114 21.5 C114 19.0147 112.2091 17 110 17 C110 17 110 17 110 17" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /><path fill="none" d="M122 26 C124.2091 26 126 23.9853 126 21.5 C126 19.0147 124.2091 17 122 17 C122 17 122 17 122 17 M110 17 L122 17 M110 26 L122 26" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"technology-function": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(201,231,183)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(201,231,183)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><polygon fill="none" clip-path="url(#clipPath1)" points=" 112 29 112 20 118 15 124 20 124 29 118 23" stroke="black" /></g ></g></svg>`) },
"technology-interaction": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(201,231,183)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(201,231,183)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><path fill="none" d="M117 16 C114.2386 16 112 18.6863 112 22 C112 25.3137 114.2386 28 117 28 L117 15.5" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /><path fill="none" d="M120 28 C122.7614 28 125 25.3137 125 22 C125 18.6863 122.7614 16 120 16 C120 16 120 16 120 16 L120 28.5" clip-path="url(#clipPath1)" fill-rule="evenodd" stroke="black" /></g ></g></svg>`) },
"technology-interface": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(201,231,183)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(201,231,183)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><rect fill="none" x="10" width="119" height="54" y="10" clip-path="url(#clipPath1)" /><circle fill="none" r="5" clip-path="url(#clipPath1)" cx="121" cy="23" stroke="black" /><line clip-path="url(#clipPath1)" fill="none" x1="116" x2="109" y1="23" y2="23" stroke="black" /></g ></g></svg>`) },
"technology-process": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(201,231,183)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(201,231,183)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><polygon fill="none" clip-path="url(#clipPath1)" points=" 112 21 120 21 120 18 126 23 120 28 120 25 112 25" stroke="black" /></g ></g></svg>`) },
"technology-service": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(201,231,183)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(201,231,183)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(140,161,128)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(140,161,128)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><rect x="109" y="17" clip-path="url(#clipPath1)" fill="none" width="16" rx="4" ry="4" height="9" stroke="black" /></g ></g></svg>`) },
"value": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(204,204,255)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(204,204,255)" stroke-width="0" stroke-miterlimit="0" ><ellipse rx="59" ry="26.5" clip-path="url(#clipPath1)" cx="69" cy="36.5" stroke="none" /></g ><g fill="rgb(142,142,178)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(142,142,178)" ><ellipse rx="59.5" fill="none" ry="27" clip-path="url(#clipPath1)" cx="69.5" cy="37" /></g ></g></svg>`) },
"value-stream": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(245,222,170)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(245,222,170)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="10" ry="10" height="54" stroke="none" /></g ><g fill="rgb(171,155,119)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(171,155,119)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="10" ry="10" height="54" /><polygon fill="none" clip-path="url(#clipPath1)" points=" 111 17 121 17 126 22 121 27 111 27 116 22" stroke="black" /></g ></g></svg>`) },
"work-package": { shape: "image", image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg viewBox="0 0 140 75" xmlns="http://www.w3.org/2000/svg"><defs id="genericDefs" /><g ><defs id="defs1" ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1" ><path d="M9 9 L131 9 L131 66 L9 66 L9 9 Z" /></clipPath ></defs ><g fill="rgb(255,224,224)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linejoin="round" stroke="rgb(255,224,224)" stroke-width="0" stroke-miterlimit="0" ><rect x="10" y="10" clip-path="url(#clipPath1)" width="119" rx="5" ry="5" height="54" stroke="none" /></g ><g fill="rgb(178,156,156)" text-rendering="optimizeLegibility" font-family="'Verdana'" stroke-linecap="butt" stroke="rgb(178,156,156)" ><rect x="10" y="10" clip-path="url(#clipPath1)" fill="none" width="119" rx="5" ry="5" height="54" /></g ></g></svg>`) },
}
shapeOptions.junction = { shape: "dot" };
shapeOptions.cluster = { shape: "image", label: null, image: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg width="236" height="178" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="2032" y="1111" width="236" height="178"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-2032 -1111)"><path d="M2033 1112 2162 1112 2162 1156 2033 1156 2033 1112" fill="#BDC1C1" fill-rule="evenodd"/><path d="M2033 1156 2266 1156 2266 1287 2033 1287" fill="#D2D7D7" fill-rule="evenodd"/><path d="M2033.5 1156.5 2033.5 1112.5 2162.5 1112.5 2162.5 1156.5" stroke="#939696" stroke-width="3.4375" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/><path d="M2033.5 1156.5 2266.5 1156.5 2266.5 1287.5 2033.5 1287.5Z" stroke="#939696" stroke-width="3.4375" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/><path d="M2062.44 1146.96C2061.94 1147.19 2061.47 1147.41 2061.05 1147.61 2060.62 1147.82 2060.07 1148.04 2059.39 1148.27 2058.81 1148.45 2058.18 1148.6 2057.51 1148.73 2056.85 1148.86 2056.12 1148.92 2055.32 1148.92 2053.79 1148.92 2052.4 1148.7 2051.14 1148.27 2049.88 1147.83 2048.8 1147.15 2047.9 1146.22 2047 1145.3 2046.28 1144.13 2045.75 1142.71 2045.25 1141.29 2045 1139.65 2045 1137.77 2045 1135.99 2045.24 1134.41 2045.72 1133.02 2046.22 1131.63 2046.93 1130.45 2047.86 1129.47 2048.77 1128.55 2049.85 1127.84 2051.1 1127.35 2052.36 1126.84 2053.76 1126.58 2055.32 1126.58 2056.45 1126.58 2057.58 1126.72 2058.71 1127 2059.84 1127.29 2061.08 1127.79 2062.44 1128.51L2062.44 1131.9 2062.25 1131.9C2061.1 1130.9 2059.94 1130.18 2058.79 1129.74 2057.66 1129.28 2056.44 1129.05 2055.13 1129.05 2054.08 1129.05 2053.12 1129.23 2052.27 1129.59 2051.42 1129.92 2050.65 1130.46 2049.97 1131.21 2049.32 1131.93 2048.8 1132.84 2048.43 1133.95 2048.08 1135.06 2047.9 1136.33 2047.9 1137.77 2047.9 1139.29 2048.1 1140.6 2048.5 1141.71 2048.9 1142.79 2049.42 1143.67 2050.05 1144.37 2050.73 1145.06 2051.5 1145.59 2052.38 1145.95 2053.26 1146.29 2054.19 1146.45 2055.17 1146.45 2056.5 1146.45 2057.76 1146.22 2058.94 1145.76 2060.12 1145.27 2061.22 1144.55 2062.25 1143.6L2062.44 1143.6 2062.44 1146.96ZM2068.89 1148.54 2066.22 1148.54 2066.22 1126 2068.89 1126 2068.89 1148.54ZM2087.23 1148.54 2084.55 1148.54 2084.55 1146.72C2083.67 1147.47 2082.82 1148.04 2081.99 1148.42 2081.16 1148.81 2080.26 1149 2079.28 1149 2077.62 1149 2076.33 1148.49 2075.4 1147.46 2074.47 1146.4 2074.01 1144.87 2074.01 1142.86L2074.01 1132.37 2076.68 1132.37 2076.68 1141.59C2076.68 1142.39 2076.72 1143.08 2076.79 1143.67 2076.87 1144.27 2077.03 1144.77 2077.28 1145.18 2077.53 1145.59 2077.86 1145.9 2078.26 1146.11 2078.66 1146.29 2079.25 1146.38 2080.03 1146.38 2080.71 1146.38 2081.45 1146.2 2082.25 1145.84 2083.08 1145.48 2083.85 1145.01 2084.55 1144.45L2084.55 1132.37 2087.23 1132.37 2087.23 1148.54ZM2103.73 1143.87C2103.73 1145.36 2103.12 1146.58 2101.92 1147.53 2100.74 1148.46 2099.12 1148.92 2097.06 1148.92 2095.88 1148.92 2094.8 1148.78 2093.82 1148.5 2092.86 1148.22 2092.05 1147.91 2091.37 1147.57L2091.37 1144.52 2091.52 1144.52C2092.35 1145.17 2093.28 1145.68 2094.31 1146.07 2095.34 1146.43 2096.33 1146.61 2097.28 1146.61 2098.44 1146.61 2099.34 1146.41 2100 1146.03 2100.67 1145.64 2101.01 1145.04 2101.01 1144.22 2101.01 1143.57 2100.83 1143.1 2100.45 1142.79 2100.1 1142.45 2099.42 1142.17 2098.41 1141.94 2098.04 1141.86 2097.54 1141.77 2096.91 1141.67 2096.3 1141.54 2095.75 1141.4 2095.25 1141.24 2093.87 1140.88 2092.89 1140.34 2092.31 1139.62 2091.73 1138.88 2091.45 1137.98 2091.45 1136.92 2091.45 1136.25 2091.58 1135.62 2091.86 1135.03 2092.14 1134.44 2092.54 1133.91 2093.07 1133.45 2093.59 1133.01 2094.26 1132.66 2095.06 1132.41 2095.89 1132.12 2096.81 1131.98 2097.81 1131.98 2098.77 1131.98 2099.72 1132.1 2100.67 1132.33 2101.65 1132.56 2102.46 1132.84 2103.09 1133.18L2103.09 1136.11 2102.93 1136.11C2102.26 1135.6 2101.43 1135.17 2100.45 1134.84 2099.49 1134.48 2098.55 1134.3 2097.62 1134.3 2096.64 1134.3 2095.82 1134.49 2095.14 1134.88 2094.48 1135.24 2094.16 1135.79 2094.16 1136.54 2094.16 1137.2 2094.36 1137.71 2094.76 1138.04 2095.16 1138.4 2095.8 1138.68 2096.68 1138.89 2097.18 1138.99 2097.74 1139.11 2098.34 1139.24 2098.94 1139.34 2099.44 1139.44 2099.85 1139.55 2101.08 1139.83 2102.03 1140.33 2102.71 1141.05 2103.39 1141.75 2103.73 1142.68 2103.73 1143.87ZM2115.71 1148.38C2115.21 1148.54 2114.65 1148.65 2114.05 1148.73 2113.47 1148.81 2112.96 1148.85 2112.51 1148.85 2110.9 1148.85 2109.67 1148.41 2108.82 1147.53 2107.99 1146.63 2107.57 1145.21 2107.57 1143.25L2107.57 1134.64 2105.77 1134.64 2105.77 1132.37 2107.57 1132.37 2107.57 1127.74 2110.21 1127.74 2110.21 1132.37 2115.71 1132.37 2115.71 1134.64 2110.21 1134.64 2110.21 1142.02C2110.21 1142.86 2110.22 1143.53 2110.25 1144.02 2110.3 1144.49 2110.44 1144.92 2110.66 1145.33 2110.89 1145.72 2111.18 1146 2111.53 1146.18 2111.9 1146.36 2112.46 1146.45 2113.19 1146.45 2113.61 1146.45 2114.06 1146.39 2114.54 1146.26 2115.02 1146.13 2115.36 1146.03 2115.56 1145.95L2115.71 1145.95 2115.71 1148.38ZM2132.12 1140.74 2120.48 1140.74C2120.48 1141.72 2120.63 1142.58 2120.93 1143.33 2121.23 1144.07 2121.63 1144.68 2122.14 1145.14 2122.61 1145.6 2123.19 1145.95 2123.87 1146.18 2124.55 1146.41 2125.29 1146.53 2126.09 1146.53 2127.17 1146.53 2128.25 1146.31 2129.33 1145.87 2130.44 1145.44 2131.21 1145.01 2131.67 1144.6L2131.82 1144.6 2131.82 1147.53C2130.91 1147.92 2130 1148.25 2129.07 1148.54 2128.14 1148.79 2127.16 1148.92 2126.13 1148.92 2123.52 1148.92 2121.47 1148.2 2119.99 1146.76 2118.53 1145.3 2117.8 1143.22 2117.8 1140.55 2117.8 1137.9 2118.51 1135.8 2119.91 1134.26 2121.32 1132.69 2123.17 1131.9 2125.45 1131.9 2127.59 1131.9 2129.23 1132.55 2130.39 1133.83 2131.54 1135.09 2132.12 1136.91 2132.12 1139.28L2132.12 1140.74ZM2129.52 1138.66C2129.52 1137.22 2129.17 1136.11 2128.47 1135.34 2127.79 1134.57 2126.74 1134.18 2125.34 1134.18 2123.91 1134.18 2122.76 1134.61 2121.91 1135.45 2121.08 1136.3 2120.6 1137.37 2120.48 1138.66L2129.52 1138.66ZM2146 1135.34 2145.85 1135.34C2145.45 1135.24 2145.06 1135.17 2144.68 1135.15 2144.33 1135.09 2143.89 1135.07 2143.36 1135.07 2142.56 1135.07 2141.77 1135.26 2140.99 1135.65 2140.24 1136.01 2139.51 1136.48 2138.81 1137.08L2138.81 1148.54 2136.13 1148.54 2136.13 1132.37 2138.81 1132.37 2138.81 1134.76C2139.86 1133.89 2140.79 1133.27 2141.59 1132.91 2142.4 1132.55 2143.21 1132.37 2144.04 1132.37 2144.52 1132.37 2144.86 1132.38 2145.06 1132.41 2145.26 1132.43 2145.57 1132.48 2146 1132.56L2146 1135.34Z" fill-rule="evenodd"/></g></svg>`) };
let edgeOptions = {
composition_relationship: {
label: "composition",
arrows: {
from: {
type: "image",
enabled: true,
imageWidth: 14,
imageHeight: 22,
src: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg width="46" height="74" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="1057" y="680" width="46" height="74"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-1057 -680)"><path d="M1080 681.5 1100.5 716 1080 750.5 1059.5 716 1080 681.5" stroke="#000000" stroke-width="3.4375" stroke-miterlimit="8" fill-rule="evenodd"/></g></svg>`)
}
}
},
aggregation_relationship: {
label: "aggregation",
arrows: {
from: {
type: "image",
enabled: true,
imageWidth: 14,
imageHeight: 22,
src: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg width="46" height="74" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="1057" y="680" width="46" height="74"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-1057 -680)"><path d="M1080 681.5 1100.5 716 1080 750.5 1059.5 716 1080 681.5" stroke="#000000" stroke-width="3.4375" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/></g></svg>`)
}
}
},
assignment_relationship: {
label: "assignment",
arrows: {
from: {
type: "circle",
scaleFactor: 0.5,
enabled: true
},
to: {
type: "image",
enabled: true,
imageWidth: 12,
imageHeight: 17,
src: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg width="56" height="39" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="1386" y="696" width="56" height="39"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-1386 -696)"><path d="M1414 699.5 1438.5 733.5 1389.5 733.5Z" stroke="#000000" stroke-width="3.4375" stroke-miterlimit="8" fill-rule="evenodd"/></g></svg>`)
}
}
},
realization_relationship: {
label: "realization",
arrows: {
to: {
type: "image",
enabled: true,
imageWidth: 16,
imageHeight: 22.5,
src: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg width="55" height="39" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="1302" y="696" width="55" height="39"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-1302 -696)"><path d="M1329.5 699.5 1353.5 733.5 1305.5 733.5Z" stroke="#000000" stroke-width="3.4375" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/></g></svg>`)
}
},
dashes: [10, 10]
},
serving_relationship: {
label: "serving",
arrows: {
to: {
type: "image",
enabled: true,
imageWidth: 14,
imageHeight: 17,
src: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg width="23" height="29" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="1247" y="701" width="23" height="29"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-1247 -701)"><path d="M1269 729 1258.5 704 1248 729" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/></g></svg>`)
}
}
},
access_relationship: {
label: "access",
arrows: {
to: {
type: "image",
enabled: true,
imageWidth: 14,
imageHeight: 17,
src: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg width="23" height="29" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="1247" y="701" width="23" height="29"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-1247 -701)"><path d="M1269 729 1258.5 704 1248 729" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/></g></svg>`)
}
},
dashes: [10, 10]
},
influence_relationship: {
label: "influence",
arrows: {
to: {
type: "image",
enabled: true,
imageWidth: 14,
imageHeight: 17,
src: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg width="23" height="29" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="1247" y="701" width="23" height="29"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-1247 -701)"><path d="M1269 729 1258.5 704 1248 729" stroke="#000000" stroke-width="2.29167" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/></g></svg>`)
}
}, dashes: [12, 12]
},
triggering_relationship: {
label: "triggering",
arrows: {
to: {
type: "triangle",
enabled: true
}
}
},
flow_relationship: {
label: "flow",
arrows: {
to: {
type: "arrow",
enabled: true
}
},
dashes: [15, 15]
},
specialization_relationship: {
label: "specialization",
arrows: {
to: {
type: "image",
enabled: true,
imageWidth: 16,
imageHeight: 22.5,
src: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`<svg width="55" height="39" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="1302" y="696" width="55" height="39"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-1302 -696)"><path d="M1329.5 699.5 1353.5 733.5 1305.5 733.5Z" stroke="#000000" stroke-width="3.4375" stroke-miterlimit="8" fill="#FFFFFF" fill-rule="evenodd"/></g></svg>`)
}
}
},
association_relationship: {
label: "association"
}
}
let nodes = [];
let edges = [];
$("element").each(e => {
let props = e.prop();
let rows = "";
props.forEach(p => {
rows += `<tr><th>${p}</th><td>${e.prop(p)}</td></tr>`
})
function TextBox(length, text) {
var array = [];
text.split(' ').reduce(function (prev, cur) {
var next = [prev, cur].join(' ').trim();
if (next.length <= length) {
return next;
} else {
array.push(next);
return '';
}
});
if (array.length > 1) {
let result = "";
for (let index = 0; index < array.length - 1; index++) {
result += array[index] + "</br>";
}
result += array[array.length - 1];
return result;
}
return text;
}
let node = {
id: e.id,
label: e.name,
group: e.type,
title: `
<div style='display: inline-block; margin: 1px;'>
<table>
<tr>
<th>Name</th>
<td>${e.name}</td>
</tr>
<tr>
<th>Type</th>
<td>${e.type}</td>
</tr>
<tr>
<th>Documentation</th>
<td>${TextBox(40, e.documentation)}</td>
</tr>
${rows}
</table>
</div>`
};
if (e.type == "junction") {
if (e.junctionType == "and") {
node.color = "#000000";
node.label = "And";
}
else {
node.color = "#FFFFFF";
node.label = "Or";
}
node.size = 10;
}
//if (shape) node = { ...node, ...shape }
nodes.push(node);
})
$("relationship").each(r => {
let edge = {
from: r.source.id,
to: r.target.id,
length: 250,
color: "#000000",
title: r.type
}
edge = { ...edge, ...edgeOptions[r.type.replaceAll("-", "_")] };
delete edge.label; // Comment this line to show labels
if (r.type == "influence-relationship" && r.influenceStrength)
edge.label = r.influenceStrength;
edges.push(edge);
})
let html = /* html */
`<!DOCTYPE html>
<html lang="en">
<head>
<title>Visualiser</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script type="text/javascript" src="${__DIR__ + "lib/vis-network.js"}"></script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
table {
font-size: 0.8rem;
}
th {
text-align:left;
vertical-align: top;
padding-right: 20px;
}
td {
text-align: left;
vertical-align: top;
}
form {
width: 500px;
}
dialog {
z-index: 100;
position: absolute;
top: 2%;
border: solid gray 2px;
border-radius: 10px;
background-color: white;
}
#Visualise {
width: 100%;
height: 100%;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
}
#progress {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
}
</style>
<script type="text/javascript" defer>
var network;
var edges;
var nodes;
var allNodes;
var data;
function draw() {
function htmlTitle(html) {
const container = document.createElement("div");
container.innerHTML = html;
return container;
}
let nodeArray = ${JSON.stringify(nodes)};
nodeArray.forEach(n => {
if (n.title) n.title = htmlTitle(n.title);
});
nodes = new vis.DataSet(nodeArray);
edges = new vis.DataSet(${JSON.stringify(edges)});
var container = document.getElementById("Visualise");
var options = {
physics: {
solver: 'barnesHut',
enabled: true
},
interaction: {
tooltipDelay: 50,
navigationButtons: false
},
edges: {
length: 2000,
endPointOffset: {
from: -8,
to: -8
}
},
layout: {
randomSeed: undefined,
improvedLayout: true,
clusterThreshold: 350,
},
nodes: {
shadow: true
},
groups: ${JSON.stringify(shapeOptions)}
}
let orphansOption = document.querySelector("#orphans");
let dismissButton = document.querySelector("#dismiss");
let physicsStartStop = document.querySelector("#physics");
let solverOption = document.querySelector("#solver");
let shadowsOption = document.querySelector("#shadows");
let navigationOption = document.querySelector("#navigation");
function filter(node) {
if (orphansOption.checked) return true;
console.log(node)
let connected = network.getConnectedNodes(node.id);
console.log(connected)
if (connected.length == 0) return false;
else return true;
}
let nodesView = new vis.DataView(nodes, { filter: filter });
// Create network
data = { nodes: nodesView, edges: edges };
network = new vis.Network(container, data, options);
// Setup events for progress bar
network.on("stabilizationProgress", function (params) {
var width = Math.round((params.iterations / params.total)*100.0);
document.getElementById("progress-bar").style.width = width + "%";
document.getElementById("progress-bar").innerText = width + "%";
});
network.once("stabilizationIterationsDone", function () {
document.getElementById("progress-bar").innerText = "100%";
document.getElementById("progress-bar").style.width = "100%";
document.getElementById("progress").style.opacity = 0;
setTimeout(function () {
document.getElementById("progress").style.display = "none";
}, 500);
});
// Setup event for clustering
network.on("doubleClick", function (params) {
if (params.nodes.length == 1) {
network.clusterByConnection(params.nodes[0], {
clusterNodeProperties: ${JSON.stringify(shapeOptions["cluster"])}
});
}
})
// Setup event for opening a cluster
network.on("click", function (params) {
if (params.nodes.length == 1) {
if (network.isCluster(params.nodes[0]) == true) {
network.openCluster(params.nodes[0]);
}
}
});
// Event handlers for settings/options dialog
function showOptions() {
document.querySelector('dialog').show();
physicsStartStop.checked = options.physics.enabled;
shadowsOption.checked = options.nodes.shadow;
}
function dismissOptions() {
document.querySelector('dialog').close();
setOptions();
}
function startStopPhysics() {
console.log("Start-stop")
if (physicsStartStop.checked) network.startSimulation();
else network.stopSimulation();
setOptions();
}
function setOptions() {
options.physics.enabled = physicsStartStop.checked;
options.physics.solver = solverOption.value;
options.nodes.shadow = shadowsOption.checked;
options.interaction.navigationButtons = navigationOption.checked;
network.setOptions(options);
}
function filterNetwork() {
nodesView.refresh();
}
dismissButton.addEventListener("click", dismissOptions);
physicsStartStop.addEventListener("click",startStopPhysics);
solverOption.addEventListener("change",setOptions);
shadowsOption.addEventListener("change",setOptions);
navigationOption.addEventListener("change",setOptions);
orphansOption.addEventListener("change", filterNetwork)
network.on("select", neighbourhoodHighlight);
network.on("oncontext", showOptions);
allNodes = nodes.get({ returnType: "Object" });
}
function neighbourhoodHighlight(params) {
// if something is selected:
if (params.nodes.length > 0) {
highlightActive = true;
var i, j;
var selectedNode = params.nodes[0];
var degrees = 2;
// mark all nodes as hard to read.
for (var nodeId in allNodes) {
allNodes[nodeId].opacity = 0.2;
if (allNodes[nodeId].hiddenLabel === undefined) {
allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
allNodes[nodeId].label = undefined;
}
}
var connectedNodes = network.getConnectedNodes(selectedNode);
var allConnectedNodes = [];
// get the second degree nodes
for (i = 1; i < degrees; i++) {
for (j = 0; j < connectedNodes.length; j++) {
allConnectedNodes = allConnectedNodes.concat(
network.getConnectedNodes(connectedNodes[j])
);
}
}
// all second degree nodes gets their opacity and label back
for (i = 0; i < allConnectedNodes.length; i++) {
allNodes[allConnectedNodes[i]].opacity = 1.0;
if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
allNodes[allConnectedNodes[i]].label = allNodes[allConnectedNodes[i]].hiddenLabel;
allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
}
}
// all first degree nodes get their opacity and label back
for (i = 0; i < connectedNodes.length; i++) {
allNodes[connectedNodes[i]].opacity = 1.0;
if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].hiddenLabel;
allNodes[connectedNodes[i]].hiddenLabel = undefined;
}
}
// the main node gets its opacity and label back.
allNodes[selectedNode].opacity = 1.0;
if (allNodes[selectedNode].hiddenLabel !== undefined) {
allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
allNodes[selectedNode].hiddenLabel = undefined;
}
} else if (highlightActive === true) {
// reset all nodes
for (var nodeId in allNodes) {
allNodes[nodeId].opacity = 1.0;
if (allNodes[nodeId].hiddenLabel !== undefined) {
allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
allNodes[nodeId].hiddenLabel = undefined;
}
}
highlightActive = false;
}
// transform the object into an array
var updateArray = [];
for (nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
updateArray.push(allNodes[nodeId]);
}
}
nodes.update(updateArray);
}
</script>
</head>
<body onload="draw()">
<div id="wrapper">
<dialog id="dialog">
<form method="dialog" class="row g-0">
<div class="col-sm-4">Shows shadows</div>
<div class="col-sm-8">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="shadows">
</div>
</div>
<div class="col-sm-4">Show orphans</div>
<div class="col-sm-8">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="orphans" checked>
</div>
</div>
<div class="col-sm-4">Show navigation</div>
<div class="col-sm-8">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="navigation">
</div>
</div>
<div class="col-sm-4">Enable physics</div>
<div class="col-sm-8">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="physics">
</div>
</div>
<div class="col-sm-4" >Physics solver</div>
<div class="col-sm-8">
<select class="form-select form-select-sm" id="solver">
<option value="barnesHut">Barnes-Hut</option>
<option value="repulsion">Repulsion</option>
<option value="hierarchicalRepulsion">Hierarchical Repulsion</option>
<option value="forceAtlas2Based">ForceAtlas2</option>
</select>
</div>
<p></p>
<div class="col-sm-10">
<button id="dismiss" class="btn btn-primary btn-sm">Dismiss</button>
</div>
</form>
</dialog>
<div class="progress" id="progress" style="height: 40px;">
<div class="progress-bar progress-bar-success progress-bar-striped" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="font-size: 1.5rem; width:0%">0%</div>
</div>
<div id="Visualise"></div>
</div>
</body>
</html>`;
// Write the HTML to a temporary file, so we are allowed to execute a local script
let System = Java.type('java.lang.System');
let tmpfile = System.getProperty("java.io.tmpdir") + "visualise.html";
$.fs.writeFile(tmpfile, html);
let input = new BrowserEditorInput("file:///" + tmpfile, "Explore " + model.name);
let browsereditor = EditorManager.openEditor(input, IBrowserEditor.ID);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment