(function() { Sidebar.prototype.addC4Palette = function() { var w = 100; var h = 100; var dt = 'c4 '; var pts = 'points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];'; this.setCurrentSearchEntryLibrary('c4'); this.addPaletteFunctions('c4', 'C4', false, [ this.addEntry(dt + 'person', function() { var bg = new mxCell('', new mxGeometry(0, 0, w * 2, h * 1.8), 'html=1;fontSize=11;dashed=0;whiteSpace=wrap;fillColor=#083F75;strokeColor=#06315C;fontColor=#ffffff;shape=mxgraph.c4.person2;align=center;metaEdit=1;points=[[0.5,0,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0]];resizable=0;'); bg.vertex = true; bg.setValue(mxUtils.createXmlDocument().createElement('object')); bg.setAttribute('placeholders', '1'); bg.setAttribute('c4Name', 'Person name'); bg.setAttribute('c4Type', 'Person'); bg.setAttribute('c4Description', 'Description of person.'); bg.setAttribute('label', '%c4Name%
[%c4Type%]

%c4Description%
'); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Person'); }), this.addEntry(dt + 'external person', function() { var bg = new mxCell('', new mxGeometry(0, 0, w * 2, h * 1.8), 'html=1;fontSize=11;dashed=0;whiteSpace=wrap;fillColor=#6C6477;strokeColor=#4D4D4D;fontColor=#ffffff;shape=mxgraph.c4.person2;align=center;metaEdit=1;points=[[0.5,0,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0]];resizable=0;'); bg.vertex = true; bg.setValue(mxUtils.createXmlDocument().createElement('object')); bg.setAttribute('placeholders', '1'); bg.setAttribute('c4Name', 'External person name'); bg.setAttribute('c4Type', 'Person'); bg.setAttribute('c4Description', 'Description of external person.'); bg.setAttribute('label', '%c4Name%
[%c4Type%]

%c4Description%
'); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'External Person'); }), this.addEntry(dt + 'software system', function() { var bg = new mxCell('', new mxGeometry(0, 0, w * 2.4, h * 1.2), 'rounded=1;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=#1061B0;fontColor=#ffffff;align=center;arcSize=10;strokeColor=#0D5091;metaEdit=1;resizable=0;' + pts); bg.vertex = true; bg.setValue(mxUtils.createXmlDocument().createElement('object')); bg.setAttribute('placeholders', '1'); bg.setAttribute('c4Name', 'System name'); bg.setAttribute('c4Type', 'Software System'); bg.setAttribute('c4Description', 'Description of software system.'); bg.setAttribute('label', '%c4Name%
[%c4Type%]

%c4Description%
'); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Software System'); }), this.addEntry(dt + 'external software system', function() { var bg = new mxCell('', new mxGeometry(0, 0, w * 2.4, h * 1.2), 'rounded=1;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=#8C8496;fontColor=#ffffff;align=center;arcSize=10;strokeColor=#736782;metaEdit=1;resizable=0;' + pts); bg.vertex = true; bg.setValue(mxUtils.createXmlDocument().createElement('object')); bg.setAttribute('placeholders', '1'); bg.setAttribute('c4Name', 'External system name'); bg.setAttribute('c4Type', 'Software System'); bg.setAttribute('c4Description', 'Description of external software system.'); bg.setAttribute('label', '%c4Name%
[%c4Type%]

%c4Description%
'); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'External Software System'); }), this.addEntry(dt + 'container', function() { var bg = new mxCell('', new mxGeometry(0, 0, w * 2.4, h * 1.2), 'rounded=1;whiteSpace=wrap;html=1;fontSize=11;labelBackgroundColor=none;fillColor=#23A2D9;fontColor=#ffffff;align=center;arcSize=10;strokeColor=#0E7DAD;metaEdit=1;resizable=0;' + pts); bg.vertex = true; bg.setValue(mxUtils.createXmlDocument().createElement('object')); bg.setAttribute('placeholders', '1'); bg.setAttribute('c4Name', 'Container name'); bg.setAttribute('c4Type', 'Container'); bg.setAttribute('c4Technology', 'e.g. SpringBoot, ElasticSearch, etc.'); bg.setAttribute('c4Description', 'Description of container role/responsibility.'); bg.setAttribute('label', '%c4Name%
[%c4Type%: %c4Technology%]

%c4Description%
'); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Container'); }), this.addEntry(dt + 'data container', function() { var bg = new mxCell('', new mxGeometry(0, 0, w * 2.4, h * 1.2), 'shape=cylinder3;size=15;whiteSpace=wrap;html=1;boundedLbl=1;rounded=0;labelBackgroundColor=none;fillColor=#23A2D9;fontSize=12;fontColor=#ffffff;align=center;strokeColor=#0E7DAD;metaEdit=1;points=[[0.5,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.5,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];resizable=0;'); bg.vertex = true; bg.setValue(mxUtils.createXmlDocument().createElement('object')); bg.setAttribute('placeholders', '1'); bg.setAttribute('c4Type', 'Container name'); bg.setAttribute('c4Container', 'Container'); bg.setAttribute('c4Technology', 'e.g. Oracle Database 12'); bg.setAttribute('c4Description', 'Description of storage type container role/responsibility.'); bg.setAttribute('label', '%c4Type%
[%c4Container%: %c4Technology%]

%c4Description%
'); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Data Container'); }), this.addEntry(dt + 'microservice container', function() { var bg = new mxCell('', new mxGeometry(0, 0, w * 2, h * 1.7), 'shape=hexagon;size=50;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fixedSize=1;rounded=1;labelBackgroundColor=none;fillColor=#23A2D9;fontSize=12;fontColor=#ffffff;align=center;strokeColor=#0E7DAD;metaEdit=1;points=[[0.5,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.5,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];resizable=0;'); bg.vertex = true; bg.setValue(mxUtils.createXmlDocument().createElement('object')); bg.setAttribute('placeholders', '1'); bg.setAttribute('c4Type', 'Container name'); bg.setAttribute('c4Container', 'Container'); bg.setAttribute('c4Technology', 'e.g. Micronaut, etc.'); bg.setAttribute('c4Description', 'Description of microservice type container role/responsibility.'); bg.setAttribute('label', '%c4Type%
[%c4Container%: %c4Technology%]

%c4Description%
'); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Microservice Container'); }), this.addEntry(dt + 'message bus container', function() { var bg = new mxCell('', new mxGeometry(0, 0, w * 2.4, h * 1.2), 'shape=cylinder3;size=15;direction=south;whiteSpace=wrap;html=1;boundedLbl=1;rounded=0;labelBackgroundColor=none;fillColor=#23A2D9;fontSize=12;fontColor=#ffffff;align=center;strokeColor=#0E7DAD;metaEdit=1;points=[[0.5,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.5,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];resizable=0;'); bg.vertex = true; bg.setValue(mxUtils.createXmlDocument().createElement('object')); bg.setAttribute('placeholders', '1'); bg.setAttribute('c4Type', 'Container name'); bg.setAttribute('c4Container', 'Container'); bg.setAttribute('c4Technology', 'e.g. Apache Kafka, etc.'); bg.setAttribute('c4Description', 'Description of message bus type container role/responsibility.'); bg.setAttribute('label', '%c4Type%
[%c4Container%: %c4Technology%]

%c4Description%
'); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Message Bus Container'); }), this.addEntry(dt + 'web browser container', function() { var bg = new mxCell('', new mxGeometry(0, 0, w * 2.4, h * 1.6), 'shape=mxgraph.c4.webBrowserContainer2;whiteSpace=wrap;html=1;boundedLbl=1;rounded=0;labelBackgroundColor=none;strokeColor=#118ACD;fillColor=#23A2D9;strokeColor=#118ACD;strokeColor2=#0E7DAD;fontSize=12;fontColor=#ffffff;align=center;metaEdit=1;points=[[0.5,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.5,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];resizable=0;'); bg.vertex = true; bg.setValue(mxUtils.createXmlDocument().createElement('object')); bg.setAttribute('placeholders', '1'); bg.setAttribute('c4Type', 'Container name'); bg.setAttribute('c4Container', 'Container'); bg.setAttribute('c4Technology', 'e.g. JavaScript, Angular etc.'); bg.setAttribute('c4Description', 'Description of web browser container role/responsibility.'); bg.setAttribute('label', '%c4Type%
[%c4Container%: %c4Technology%]

%c4Description%
'); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Web Browser Container'); }), this.addEntry(dt + 'component', function() { var bg = new mxCell('', new mxGeometry(0, 0, w * 2.4, h * 1.2), 'rounded=1;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=#63BEF2;fontColor=#ffffff;align=center;arcSize=6;strokeColor=#2086C9;metaEdit=1;resizable=0;' + pts); bg.vertex = true; bg.setValue(mxUtils.createXmlDocument().createElement('object')); bg.setAttribute('placeholders', '1'); bg.setAttribute('c4Name', 'Component name'); bg.setAttribute('c4Type', 'Component'); bg.setAttribute('c4Technology', 'e.g. Spring Service'); bg.setAttribute('c4Description', 'Description of component role/responsibility.'); bg.setAttribute('label', '%c4Name%
[%c4Type%: %c4Technology%]

%c4Description%
'); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Component'); }), this.addEntry(dt + 'relationship description technology', function() { var edge = new mxCell('', new mxGeometry(0, 0, w * 2.4, 0), 'endArrow=blockThin;html=1;fontSize=10;fontColor=#404040;strokeWidth=1;endFill=1;strokeColor=#828282;elbow=vertical;metaEdit=1;endSize=14;startSize=14;jumpStyle=arc;jumpSize=16;rounded=0;edgeStyle=orthogonalEdgeStyle;'); edge.geometry.setTerminalPoint(new mxPoint(0, 0), true); edge.geometry.setTerminalPoint(new mxPoint(w * 2.4, 0), false); edge.geometry.relative = true; edge.edge = true; edge.setValue(mxUtils.createXmlDocument().createElement('object')); edge.setAttribute('placeholders', '1'); edge.setAttribute('c4Type', 'Relationship'); edge.setAttribute('c4Technology', 'e.g. JSON/HTTP'); edge.setAttribute('c4Description', 'e.g. Makes API calls'); edge.setAttribute('label', '
%c4Description%
[%c4Technology%]
'); return sb.createEdgeTemplateFromCells([edge], edge.geometry.width, edge.geometry.height, 'Relationship with description and technology'); }), this.addEntry(dt + 'relationship description', function() { var edge = new mxCell('', new mxGeometry(0, 0, w * 2.4, 0), 'endArrow=blockThin;html=1;fontSize=10;fontColor=#404040;strokeWidth=1;endFill=1;strokeColor=#828282;elbow=vertical;metaEdit=1;endSize=14;startSize=14;jumpStyle=arc;jumpSize=16;rounded=0;edgeStyle=orthogonalEdgeStyle;'); edge.geometry.setTerminalPoint(new mxPoint(0, 0), true); edge.geometry.setTerminalPoint(new mxPoint(w * 2.4, 0), false); edge.geometry.relative = true; edge.edge = true; edge.setValue(mxUtils.createXmlDocument().createElement('object')); edge.setAttribute('placeholders', '1'); edge.setAttribute('c4Type', 'Relationship'); edge.setAttribute('c4Description', 'e.g. Visits pages'); edge.setAttribute('label', '
%c4Description%
'); return sb.createEdgeTemplateFromCells([edge], edge.geometry.width, edge.geometry.height, 'Relationship with description'); }), this.addEntry(dt + 'relationship', function() { var edge = new mxCell('', new mxGeometry(0, 0, w * 2.4, 0), 'endArrow=blockThin;html=1;fontSize=10;fontColor=#404040;strokeWidth=1;endFill=1;strokeColor=#828282;elbow=vertical;metaEdit=1;endSize=14;startSize=14;jumpStyle=arc;jumpSize=16;rounded=0;edgeStyle=orthogonalEdgeStyle;'); edge.geometry.setTerminalPoint(new mxPoint(0, 0), true); edge.geometry.setTerminalPoint(new mxPoint(w * 2.4, 0), false); edge.geometry.relative = true; edge.edge = true; edge.setValue(mxUtils.createXmlDocument().createElement('object')); edge.setAttribute('placeholders', '1'); edge.setAttribute('c4Type', 'Relationship'); return sb.createEdgeTemplateFromCells([edge], edge.geometry.width, edge.geometry.height, 'Relationship'); }), this.addEntry(dt + 'system scope boundary', function() { var bg = new mxCell('', new mxGeometry(0, 0, w * 2.4, h * 2.1), 'rounded=1;fontSize=11;whiteSpace=wrap;html=1;dashed=1;arcSize=20;fillColor=none;strokeColor=#666666;fontColor=#333333;labelBackgroundColor=none;align=left;verticalAlign=bottom;labelBorderColor=none;spacingTop=0;spacing=10;dashPattern=8 4;metaEdit=1;rotatable=0;perimeter=rectanglePerimeter;noLabel=0;labelPadding=0;allowArrows=0;connectable=0;expand=0;recursiveResize=0;editable=1;pointerEvents=0;absoluteArcSize=1;' + pts); bg.vertex = true; bg.setValue(mxUtils.createXmlDocument().createElement('object')); bg.setAttribute('placeholders', '1'); bg.setAttribute('c4Name', 'System name'); bg.setAttribute('c4Type', 'SystemScopeBoundary'); bg.setAttribute('c4Application', 'Software System'); bg.setAttribute('label', '
%c4Name%
[%c4Application%]
'); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'System scope boundary'); }), this.addEntry(dt + 'container scope boundary', function() { var bg = new mxCell('', new mxGeometry(0, 0, w * 2.4, h * 2.1), 'rounded=1;fontSize=11;whiteSpace=wrap;html=1;dashed=1;arcSize=20;fillColor=none;strokeColor=#666666;fontColor=#333333;labelBackgroundColor=none;align=left;verticalAlign=bottom;labelBorderColor=none;spacingTop=0;spacing=10;dashPattern=8 4;metaEdit=1;rotatable=0;perimeter=rectanglePerimeter;noLabel=0;labelPadding=0;allowArrows=0;connectable=0;expand=0;recursiveResize=0;editable=1;pointerEvents=0;absoluteArcSize=1;' + pts); bg.vertex = true; bg.setValue(mxUtils.createXmlDocument().createElement('object')); bg.setAttribute('placeholders', '1'); bg.setAttribute('c4Name', 'Container name'); bg.setAttribute('c4Type', 'ContainerScopeBoundary'); bg.setAttribute('c4Application', 'Container'); bg.setAttribute('label', '
%c4Name%
[%c4Application%]
'); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Container scope boundary'); }), this.addEntry(dt + 'system context diagram title', function() { var bg = new mxCell('', new mxGeometry(0, 0, w * 2.6, h * 0.4), 'text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;whiteSpace=wrap;rounded=0;metaEdit=1;allowArrows=0;resizable=1;rotatable=0;connectable=0;recursiveResize=0;expand=0;pointerEvents=0;' + pts); bg.vertex = true; bg.setValue(mxUtils.createXmlDocument().createElement('object')); bg.setAttribute('placeholders', '1'); bg.setAttribute('c4Name', '[System Context] Diagram title'); bg.setAttribute('c4Type', 'ContainerScopeBoundary'); bg.setAttribute('c4Description', 'Diagram short description'); bg.setAttribute('label', '
%c4Name%
%c4Description%
'); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'System Context diagram title'); }), this.addEntry(dt + 'container diagram title', function() { var bg = new mxCell('', new mxGeometry(0, 0, w * 2.6, h * 0.4), 'text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;whiteSpace=wrap;rounded=0;metaEdit=1;allowArrows=0;resizable=1;rotatable=0;connectable=0;recursiveResize=0;expand=0;pointerEvents=0;' + pts); bg.vertex = true; bg.setValue(mxUtils.createXmlDocument().createElement('object')); bg.setAttribute('placeholders', '1'); bg.setAttribute('c4Name', '[Containers] Diagram title'); bg.setAttribute('c4Type', 'ContainerDiagramTitle'); bg.setAttribute('c4Description', 'Diagram short description'); bg.setAttribute('label', '
%c4Name%
%c4Description%
'); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Containers diagram title'); }), this.addEntry(dt + 'component diagram title', function() { var bg = new mxCell('', new mxGeometry(0, 0, w * 2.6, h * 0.4), 'text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;whiteSpace=wrap;rounded=0;metaEdit=1;allowArrows=0;resizable=1;rotatable=0;connectable=0;recursiveResize=0;expand=0;pointerEvents=0;' + pts); bg.vertex = true; bg.setValue(mxUtils.createXmlDocument().createElement('object')); bg.setAttribute('placeholders', '1'); bg.setAttribute('c4Name', '[Components] Diagram title'); bg.setAttribute('c4Type', 'ContainerDiagramTitle'); bg.setAttribute('c4Description', 'Diagram short description'); bg.setAttribute('label', '
%c4Name%
%c4Description%
'); return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Components diagram title'); }), this.addDataEntry(dt + 'legend', 180, 210, 'Legend', '7VnbbuIwEP2avK5yBx5LoN2HrrQq+wOGDIm1jh05bgP9+h07DmEJdGm1QimFi5Q5Hjv2nOMjxXGCpNg8SFLmP0QKzAnmTpBIIVRzVWwSYMzxXZo6wczxfRf/jn9/otUzrW5JJHB1Tge/6fBC2DM0yCNkwNMGrtSWWbjKSakvFVlqaFopItWCvmoscBFYCa4I5SAR8EzMGCkratJnJiOnLH0kW/Gs2oHaaLrG3nY0L8aYMJpxDBisdfMLSEVXhN1ZWIlSd6KMJYIJfUsueDMtKX7DAagHbyHHD8KZ/rY3tUvUU65KsqI8ezT3nMUdYhcgoaKvpFuQrR3ODTYn628gW/wHEAUoucWUmqYqtxnjhiM3B5rltpvvWZBUDZDt+nZ04oVl9Di7QY/dt3l9EjUuKxeSvmo2mV3nPtcmrmnBCIfvQNIDaCrS7a7XPhWU5yCp5tJwZzIacs3lUiglirbOtgzuURmlUpS/iMygTTkig1JQrkzhoin+sJSJ+y1yIlxxgrHXxdHMpEsUCMcZo4L1sEAqVUN1qEz/XNL946RvLS2W2n9pIPgPEgh7EvgJshL8pBBwGYoS9gQrRXhm9nquCma3SJ1TBQvcFTq1Rttqdj7X2R1Fp6gXWLY10yKb5TRNgR+wh5vTm4fuKHy3TAzhIOcv0PDuHWHuwFMOXOHefBDPJEkpdG2ts/xlDp7bQU92HuG56gg+ZglvycGO1rH2/uEIwwJyonAPP/O06olsN9OzdBfdrGeI1hNf0HringQWYq1qnCuii22loBiqCwVe7N/dX7cLRV/AhUY3FxqiC00u6ELjngSS3ZPKQN0n8omfjq/bfUZfwH0mN/cZovt4/gXtp32M/8t/ihLrhJMdqP+M0iWs/ev2n8kX8B/PuxnQIA0ouqQB9Y945xujMp017MOgeBmHo9F1G5H3wQPiz+VEt5PoYTrR+JJO1D+L3nOiT3M2NF6Ow0l85aZ0hUfUGHbvVZv0/deufwA=') ]); this.setCurrentSearchEntryLibrary(); }; })();