ZK Fiddle - Loading bpmn.io

Processing...

Suggested case list:

Using timer to refresh a grid

383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlink

user model to move item to another listbox

120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlink

Disabled list item row passed to VM-1981

296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlink

Disabled list item row passed to VM-1981

295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlink

Disabled list item row passed to VM-1981

294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlink

grid sample with ListModel/RowRenderer

816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlink

grid sample with ListModel/RowRenderer

809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlink

grid sample with ListModel/RowRenderer

196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlink

grid sample with ListModel/RowRenderer

195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlink

grid sample with ListModel/RowRenderer

194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlink

grid sample with ListModel/RowRenderer

193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlink

grid sample with ListModel/RowRenderer

192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlink

grid sample with ListModel/RowRenderer

191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlink

Hierarchy table without using ZK PE/EE

1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlink

grid sample with ListModel/RowRenderer

128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlink

user model to move item to another listbox

1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlink

Using timer to refresh a grid

1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlink

Fire a event from child iframe

1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlink

Textbox input restriction sample

1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlink

Test web core taglib in ZUL

1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlink

Latest 10 Fiddles :

constraint binding textbox

3guest172.68.151.16220peldaDec 5, 2025 5:08:19 PMlink

Another new ZK fiddle

2guest172.68.151.16320peldaDec 5, 2025 5:07:51 PMlink

Another new ZK fiddle

1guest172.68.151.16220peldaDec 5, 2025 5:07:32 PMlink

Another new ZK fiddle

1peggypeng172.71.154.99364f4neDec 5, 2025 9:24:31 AMlink

tooltip example

2guest104.22.23.13rc1ntoDec 4, 2025 2:23:45 PMlink

Another new ZK fiddle

1guest172.69.134.2277t7602Dec 4, 2025 1:40:46 PMlink

Another new ZK fiddle

1peggypeng104.22.17.1802df6e3oDec 4, 2025 8:41:29 AMlink

onClose

1peggypeng172.68.87.248j8kd8aDec 3, 2025 4:10:26 AMlink

Another new ZK fiddle

1peggypeng172.69.134.2271rm7f4eNov 26, 2025 3:31:24 AMlink

ZK-5912-Suggestion

2rebeccalai104.22.20.1442qrmiiuNov 26, 2025 2:07:15 AMlink

Loading bpmn.io

98dinet188.114.110.17817p02rsJan 29, 2021 4:18:33 PMlink

resources

index.zulzul<zk> <style> #canvas { height: 100%; padding: 0; margin: 0; } </style> <window border="normal" title="hello" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('pkg$.TestComposer')"> <script src="https://unpkg.com/[email protected]/dist/bpmn-viewer.development.js"></script> <script src="https://unpkg.com/[email protected]/dist/jquery.js"></script> <script> //async function openDiagram(diagramUrl) { try { await bpmnViewer.importXML(diagramUrl); var canvas = bpmnViewer.get('canvas'); canvas.zoom('fit-viewport'); } catch (err) { console.log('could not import BPMN 2.0 diagram', err); alert('could not import BPMN 2.0 diagram'); } } </script> <button label="load bpmn" onClick="@command('onLoadBpmn')" /> <include mode="defer" src="bpmn.html" /> </window> </zk> TestComposer.javajavaimport java.io.*; import java.net.*; import org.zkoss.bind.annotation.Command; import org.zkoss.zk.ui.*; import org.zkoss.zk.ui.event.*; import org.zkoss.zk.ui.util.*; import org.zkoss.zk.ui.ext.*; import org.zkoss.zk.au.*; import org.zkoss.zk.au.out.*; import org.zkoss.zul.*; public class TestComposer { private static final String diagram = "<?xml version='1.0' encoding='UTF-8'?><bpmn2:definitions xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:bpmn2='http://www.omg.org/spec/BPMN/20100524/MODEL' xmlns:bpmndi='http://www.omg.org/spec/BPMN/20100524/DI' xmlns:dc='http://www.omg.org/spec/DD/20100524/DC' xmlns:di='http://www.omg.org/spec/DD/20100524/DI' xmlns:drools='http://www.jboss.org/drools' xmlns='http://www.jboss.org/drools' xmlns:java='http://www.java.com/javaTypes' xsi:schemaLocation='http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd http://www.jboss.org/drools drools.xsd http://www.bpsim.org/schemas/1.0 bpsim.xsd' exporter='org.eclipse.bpmn2.modeler.core' exporterVersion='1.3.3.Final-v20170221-1647-B60' expressionLanguage='http://www.mvel.org/2.0' targetNamespace='http://www.jboss.org/drools' typeLanguage='http://www.java.com/javaTypes'><bpmn2:process id='cat.dinet.xemicals.clp.PrecautionaryStatementsFlow' drools:version='1' drools:packageName='cat.dinet.xemicals.clp' drools:adHoc='false' name='PrecautionaryStatementsFlow' isExecutable='true'><bpmn2:businessRuleTask id='BusinessRuleTask_1' drools:ruleFlowGroup='PrecautionaryStatements' name='Assign Precautionary Statements'><bpmn2:extensionElements><drools:metaData name='elementname'><drools:metaValue><![CDATA[Assign Precautionary Statements]]></drools:metaValue></drools:metaData><drools:onExit-script scriptFormat='http://www.java.com/java'/><drools:onEntry-script scriptFormat='http://www.java.com/java'/></bpmn2:extensionElements><bpmn2:incoming>SequenceFlow_1</bpmn2:incoming><bpmn2:outgoing>SequenceFlow_4</bpmn2:outgoing></bpmn2:businessRuleTask><bpmn2:startEvent id='StartEvent_2' name='StartProcess'><bpmn2:extensionElements><drools:metaData name='elementname'><drools:metaValue><![CDATA[StartProcess]]></drools:metaValue></drools:metaData></bpmn2:extensionElements><bpmn2:outgoing>SequenceFlow_1</bpmn2:outgoing></bpmn2:startEvent><bpmn2:endEvent id='EndEvent_2' name='End'><bpmn2:extensionElements><drools:metaData name='elementname'><drools:metaValue><![CDATA[End]]></drools:metaValue></drools:metaData></bpmn2:extensionElements><bpmn2:incoming>SequenceFlow_4</bpmn2:incoming><bpmn2:terminateEventDefinition id='TerminateEventDefinition_1'/></bpmn2:endEvent><bpmn2:sequenceFlow id='SequenceFlow_1' drools:priority='1' sourceRef='StartEvent_2' targetRef='BusinessRuleTask_1'/><bpmn2:sequenceFlow id='SequenceFlow_4' drools:priority='1' sourceRef='BusinessRuleTask_1' targetRef='EndEvent_2'/></bpmn2:process><bpmndi:BPMNDiagram id='BPMNDiagram_1' name='Default Process Diagram'><bpmndi:BPMNPlane id='BPMNPlane_1' bpmnElement='cat.dinet.xemicals.clp.PrecautionaryStatementsFlow'><bpmndi:BPMNShape id='BPMNShape_BusinessRuleTask_1' bpmnElement='BusinessRuleTask_1' isExpanded='true'><dc:Bounds height='50.0' width='110.0' x='270.0' y='93.0'/><bpmndi:BPMNLabel id='BPMNLabel_3'><dc:Bounds height='45.0' width='81.0' x='284.0' y='95.0'/></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNShape id='BPMNShape_StartEvent_1' bpmnElement='StartEvent_2'><dc:Bounds height='36.0' width='36.0' x='101.0' y='100.0'/><bpmndi:BPMNLabel><dc:Bounds height='15.0' width='71.0' x='84.0' y='136.0'/></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNShape id='BPMNShape_EndEvent_1' bpmnElement='EndEvent_2'><dc:Bounds height='36.0' width='36.0' x='450.0' y='100.0'/><bpmndi:BPMNLabel><dc:Bounds height='15.0' width='22.0' x='457.0' y='136.0'/></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNEdge id='BPMNEdge_SequenceFlow_1' bpmnElement='SequenceFlow_1' sourceElement='BPMNShape_StartEvent_1' targetElement='BPMNShape_BusinessRuleTask_1'><di:waypoint xsi:type='dc:Point' x='137.0' y='118.0'/><di:waypoint xsi:type='dc:Point' x='203.0' y='118.0'/><di:waypoint xsi:type='dc:Point' x='270.0' y='118.0'/><bpmndi:BPMNLabel/></bpmndi:BPMNEdge><bpmndi:BPMNEdge id='BPMNEdge_SequenceFlow_4' bpmnElement='SequenceFlow_4' sourceElement='BPMNShape_BusinessRuleTask_1' targetElement='BPMNShape_EndEvent_1'><di:waypoint xsi:type='dc:Point' x='380.0' y='118.0'/><di:waypoint xsi:type='dc:Point' x='415.0' y='118.0'/><di:waypoint xsi:type='dc:Point' x='450.0' y='118.0'/><bpmndi:BPMNLabel/></bpmndi:BPMNEdge></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn2:definitions>"; @Command public void onLoadBpmn() { String command = String.format("openDiagram(\"%s\")", StringUtils.encodeHtml(diagram)); Clients.evalJavaScript(command); } @Command public void onFileBpmn() { File file = new File("bpmn.zul"); URL url = null; try{ url = file.toURL(); } catch (MalformedURLException me){ } String command = String.format("openFileDiagram(\"%s\")", url.toString()); Clients.evalJavaScript(command); } public void doAfterCompose(Component comp) throws Exception { } public void onClick$btn(Event e) throws InterruptedException{ Messagebox.show("Hi btn"); } } StringUtils.javajavaimport java.util.HashMap; public class StringUtils { private static final HashMap<Character, String> htmlEncodeChars = new HashMap<Character, String>(); static { // Special characters for HTML htmlEncodeChars.put('\u0026', "&"); htmlEncodeChars.put('\u003C', "<"); htmlEncodeChars.put('\u003E', ">"); htmlEncodeChars.put('\u0022', """); htmlEncodeChars.put('\u0152', "&OElig;"); htmlEncodeChars.put('\u0153', "&oelig;"); htmlEncodeChars.put('\u0160', "&Scaron;"); htmlEncodeChars.put('\u0161', "&scaron;"); htmlEncodeChars.put('\u0178', "&Yuml;"); htmlEncodeChars.put('\u02C6', "&circ;"); htmlEncodeChars.put('\u02DC', "&tilde;"); htmlEncodeChars.put('\u2002', "&ensp;"); htmlEncodeChars.put('\u2003', "&emsp;"); htmlEncodeChars.put('\u2009', " "); htmlEncodeChars.put('\u200C', "&zwnj;"); htmlEncodeChars.put('\u200D', "&zwj;"); htmlEncodeChars.put('\u200E', "&lrm;"); htmlEncodeChars.put('\u200F', "&rlm;"); htmlEncodeChars.put('\u2013', "–"); htmlEncodeChars.put('\u2014', "—"); htmlEncodeChars.put('\u2018', "‘"); htmlEncodeChars.put('\u2019', "’"); htmlEncodeChars.put('\u201A', "&sbquo;"); htmlEncodeChars.put('\u201C', "“"); htmlEncodeChars.put('\u201D', "”"); htmlEncodeChars.put('\u201E', "&bdquo;"); htmlEncodeChars.put('\u2020', "&dagger;"); htmlEncodeChars.put('\u2021', "&Dagger;"); htmlEncodeChars.put('\u2030', "&permil;"); htmlEncodeChars.put('\u2039', "&lsaquo;"); htmlEncodeChars.put('\u203A', "&rsaquo;"); htmlEncodeChars.put('\u20AC', "€"); // Character entity references for ISO 8859-1 characters htmlEncodeChars.put('\u00A0', " "); htmlEncodeChars.put('\u00A1', "¡"); htmlEncodeChars.put('\u00A2', "¢"); htmlEncodeChars.put('\u00A3', "£"); htmlEncodeChars.put('\u00A4', "¤"); htmlEncodeChars.put('\u00A5', "¥"); htmlEncodeChars.put('\u00A6', "¦"); htmlEncodeChars.put('\u00A7', "§"); htmlEncodeChars.put('\u00A8', "¨"); htmlEncodeChars.put('\u00A9', "©"); htmlEncodeChars.put('\u00AA', "ª"); htmlEncodeChars.put('\u00AB', "«"); htmlEncodeChars.put('\u00AC', "¬"); htmlEncodeChars.put('\u00AD', ""); htmlEncodeChars.put('\u00AE', "®"); htmlEncodeChars.put('\u00AF', "¯"); htmlEncodeChars.put('\u00B0', "°"); htmlEncodeChars.put('\u00B1', "±"); htmlEncodeChars.put('\u00B2', "²"); htmlEncodeChars.put('\u00B3', "³"); htmlEncodeChars.put('\u00B4', "´"); htmlEncodeChars.put('\u00B5', "µ"); htmlEncodeChars.put('\u00B6', "¶"); htmlEncodeChars.put('\u00B7', "·"); htmlEncodeChars.put('\u00B8', "¸"); htmlEncodeChars.put('\u00B9', "¹"); htmlEncodeChars.put('\u00BA', "º"); htmlEncodeChars.put('\u00BB', "»"); htmlEncodeChars.put('\u00BC', "¼"); htmlEncodeChars.put('\u00BD', "½"); htmlEncodeChars.put('\u00BE', "¾"); htmlEncodeChars.put('\u00BF', "¿"); htmlEncodeChars.put('\u00C0', "À"); htmlEncodeChars.put('\u00C1', "Á"); htmlEncodeChars.put('\u00C2', "Â"); htmlEncodeChars.put('\u00C3', "Ã"); htmlEncodeChars.put('\u00C4', "Ä"); htmlEncodeChars.put('\u00C5', "Å"); htmlEncodeChars.put('\u00C6', "Æ"); htmlEncodeChars.put('\u00C7', "Ç"); htmlEncodeChars.put('\u00C8', "È"); htmlEncodeChars.put('\u00C9', "É"); htmlEncodeChars.put('\u00CA', "Ê"); htmlEncodeChars.put('\u00CB', "Ë"); htmlEncodeChars.put('\u00CC', "Ì"); htmlEncodeChars.put('\u00CD', "Í"); htmlEncodeChars.put('\u00CE', "Î"); htmlEncodeChars.put('\u00CF', "Ï"); htmlEncodeChars.put('\u00D0', "Ð"); htmlEncodeChars.put('\u00D1', "Ñ"); htmlEncodeChars.put('\u00D2', "Ò"); htmlEncodeChars.put('\u00D3', "Ó"); htmlEncodeChars.put('\u00D4', "Ô"); htmlEncodeChars.put('\u00D5', "Õ"); htmlEncodeChars.put('\u00D6', "Ö"); htmlEncodeChars.put('\u00D7', "×"); htmlEncodeChars.put('\u00D8', "Ø"); htmlEncodeChars.put('\u00D9', "Ù"); htmlEncodeChars.put('\u00DA', "Ú"); htmlEncodeChars.put('\u00DB', "Û"); htmlEncodeChars.put('\u00DC', "Ü"); htmlEncodeChars.put('\u00DD', "Ý"); htmlEncodeChars.put('\u00DE', "Þ"); htmlEncodeChars.put('\u00DF', "ß"); htmlEncodeChars.put('\u00E0', "à"); htmlEncodeChars.put('\u00E1', "á"); htmlEncodeChars.put('\u00E2', "â"); htmlEncodeChars.put('\u00E3', "ã"); htmlEncodeChars.put('\u00E4', "ä"); htmlEncodeChars.put('\u00E5', "å"); htmlEncodeChars.put('\u00E6', "æ"); htmlEncodeChars.put('\u00E7', "ç"); htmlEncodeChars.put('\u00E8', "è"); htmlEncodeChars.put('\u00E9', "é"); htmlEncodeChars.put('\u00EA', "ê"); htmlEncodeChars.put('\u00EB', "ë"); htmlEncodeChars.put('\u00EC', "ì"); htmlEncodeChars.put('\u00ED', "í"); htmlEncodeChars.put('\u00EE', "î"); htmlEncodeChars.put('\u00EF', "ï"); htmlEncodeChars.put('\u00F0', "ð"); htmlEncodeChars.put('\u00F1', "ñ"); htmlEncodeChars.put('\u00F2', "ò"); htmlEncodeChars.put('\u00F3', "ó"); htmlEncodeChars.put('\u00F4', "ô"); htmlEncodeChars.put('\u00F5', "õ"); htmlEncodeChars.put('\u00F6', "ö"); htmlEncodeChars.put('\u00F7', "÷"); htmlEncodeChars.put('\u00F8', "ø"); htmlEncodeChars.put('\u00F9', "ù"); htmlEncodeChars.put('\u00FA', "ú"); htmlEncodeChars.put('\u00FB', "û"); htmlEncodeChars.put('\u00FC', "ü"); htmlEncodeChars.put('\u00FD', "ý"); htmlEncodeChars.put('\u00FE', "þ"); htmlEncodeChars.put('\u00FF', "ÿ"); // Mathematical, Greek and Symbolic characters for HTML htmlEncodeChars.put('\u0192', "&fnof;"); htmlEncodeChars.put('\u0391', "Α"); htmlEncodeChars.put('\u0392', "Β"); htmlEncodeChars.put('\u0393', "Γ"); htmlEncodeChars.put('\u0394', "Δ"); htmlEncodeChars.put('\u0395', "Ε"); htmlEncodeChars.put('\u0396', "Ζ"); htmlEncodeChars.put('\u0397', "Η"); htmlEncodeChars.put('\u0398', "Θ"); htmlEncodeChars.put('\u0399', "Ι"); htmlEncodeChars.put('\u039A', "Κ"); htmlEncodeChars.put('\u039B', "Λ"); htmlEncodeChars.put('\u039C', "Μ"); htmlEncodeChars.put('\u039D', "Ν"); htmlEncodeChars.put('\u039E', "Ξ"); htmlEncodeChars.put('\u039F', "Ο"); htmlEncodeChars.put('\u03A0', "Π"); htmlEncodeChars.put('\u03A1', "Ρ"); htmlEncodeChars.put('\u03A3', "Σ"); htmlEncodeChars.put('\u03A4', "Τ"); htmlEncodeChars.put('\u03A5', "Υ"); htmlEncodeChars.put('\u03A6', "Φ"); htmlEncodeChars.put('\u03A7', "Χ"); htmlEncodeChars.put('\u03A8', "Ψ"); htmlEncodeChars.put('\u03A9', "Ω"); htmlEncodeChars.put('\u03B1', "α"); htmlEncodeChars.put('\u03B2', "β"); htmlEncodeChars.put('\u03B3', "γ"); htmlEncodeChars.put('\u03B4', "δ"); htmlEncodeChars.put('\u03B5', "ε"); htmlEncodeChars.put('\u03B6', "ζ"); htmlEncodeChars.put('\u03B7', "η"); htmlEncodeChars.put('\u03B8', "θ"); htmlEncodeChars.put('\u03B9', "ι"); htmlEncodeChars.put('\u03BA', "κ"); htmlEncodeChars.put('\u03BB', "λ"); htmlEncodeChars.put('\u03BC', "μ"); htmlEncodeChars.put('\u03BD', "ν"); htmlEncodeChars.put('\u03BE', "ξ"); htmlEncodeChars.put('\u03BF', "ο"); htmlEncodeChars.put('\u03C0', "π"); htmlEncodeChars.put('\u03C1', "ρ"); htmlEncodeChars.put('\u03C2', "&sigmaf;"); htmlEncodeChars.put('\u03C3', "σ"); htmlEncodeChars.put('\u03C4', "τ"); htmlEncodeChars.put('\u03C5', "υ"); htmlEncodeChars.put('\u03C6', "φ"); htmlEncodeChars.put('\u03C7', "χ"); htmlEncodeChars.put('\u03C8', "ψ"); htmlEncodeChars.put('\u03C9', "ω"); htmlEncodeChars.put('\u03D1', "&thetasym;"); htmlEncodeChars.put('\u03D2', "&upsih;"); htmlEncodeChars.put('\u03D6', "ϖ"); htmlEncodeChars.put('\u2022', "•"); htmlEncodeChars.put('\u2026', "…"); htmlEncodeChars.put('\u2032', "′"); htmlEncodeChars.put('\u2033', "″"); htmlEncodeChars.put('\u203E', "&oline;"); htmlEncodeChars.put('\u2044', "&frasl;"); htmlEncodeChars.put('\u2118', "&weierp;"); htmlEncodeChars.put('\u2111', "&image;"); htmlEncodeChars.put('\u211C', "&real;"); htmlEncodeChars.put('\u2122', "™"); htmlEncodeChars.put('\u2135', "&alefsym;"); htmlEncodeChars.put('\u2190', "←"); htmlEncodeChars.put('\u2191', "↑"); htmlEncodeChars.put('\u2192', "→"); htmlEncodeChars.put('\u2193', "↓"); htmlEncodeChars.put('\u2194', "↔"); htmlEncodeChars.put('\u21B5', "&crarr;"); htmlEncodeChars.put('\u21D0', "⇐"); htmlEncodeChars.put('\u21D1', "&uArr;"); htmlEncodeChars.put('\u21D2', "⇒"); htmlEncodeChars.put('\u21D3', "&dArr;"); htmlEncodeChars.put('\u21D4', "⇔"); htmlEncodeChars.put('\u2200', "∀"); htmlEncodeChars.put('\u2202', "∂"); htmlEncodeChars.put('\u2203', "∃"); htmlEncodeChars.put('\u2205', "∅"); htmlEncodeChars.put('\u2207', "∇"); htmlEncodeChars.put('\u2208', "∈"); htmlEncodeChars.put('\u2209', "∉"); htmlEncodeChars.put('\u220B', "&ni;"); htmlEncodeChars.put('\u220F', "∏"); htmlEncodeChars.put('\u2211', "∑"); htmlEncodeChars.put('\u2212', "−"); htmlEncodeChars.put('\u2217', "&lowast;"); htmlEncodeChars.put('\u221A', "√"); htmlEncodeChars.put('\u221D', "&prop;"); htmlEncodeChars.put('\u221E', "∞"); htmlEncodeChars.put('\u2220', "&ang;"); htmlEncodeChars.put('\u2227', "&and;"); htmlEncodeChars.put('\u2228', "&or;"); htmlEncodeChars.put('\u2229', "∩"); htmlEncodeChars.put('\u222A', "∪"); htmlEncodeChars.put('\u222B', "∫"); htmlEncodeChars.put('\u2234', "&there4;"); htmlEncodeChars.put('\u223C', "&sim;"); htmlEncodeChars.put('\u2245', "&cong;"); htmlEncodeChars.put('\u2248', "≈"); htmlEncodeChars.put('\u2260', "≠"); htmlEncodeChars.put('\u2261', "&equiv;"); htmlEncodeChars.put('\u2264', "≤"); htmlEncodeChars.put('\u2265', "≥"); htmlEncodeChars.put('\u2282', "⊂"); htmlEncodeChars.put('\u2283', "⊃"); htmlEncodeChars.put('\u2284', "&nsub;"); htmlEncodeChars.put('\u2286', "&sube;"); htmlEncodeChars.put('\u2287', "&supe;"); htmlEncodeChars.put('\u2295', "&oplus;"); htmlEncodeChars.put('\u2297', "&otimes;"); htmlEncodeChars.put('\u22A5', "&perp;"); htmlEncodeChars.put('\u22C5', "⋅"); htmlEncodeChars.put('\u2308', "&lceil;"); htmlEncodeChars.put('\u2309', "&rceil;"); htmlEncodeChars.put('\u230A', "&lfloor;"); htmlEncodeChars.put('\u230B', "&rfloor;"); htmlEncodeChars.put('\u2329', "&lang;"); htmlEncodeChars.put('\u232A', "&rang;"); htmlEncodeChars.put('\u25CA', "&loz;"); htmlEncodeChars.put('\u2660', "&spades;"); htmlEncodeChars.put('\u2663', "&clubs;"); htmlEncodeChars.put('\u2665', "&hearts;"); htmlEncodeChars.put('\u2666', "&diams;"); } private StringUtils() { } public static String encodeHtml(String source) { return encode(source, htmlEncodeChars); } private static String encode(String source, HashMap<Character, String> encodingTable) { if (null == source) { return null; } if (null == encodingTable) { return source; } StringBuffer encoded_string = null; char[] string_to_encode_array = source.toCharArray(); int last_match = -1; int difference = 0; for (int i = 0; i < string_to_encode_array.length; i++) { char char_to_encode = string_to_encode_array[i]; if (encodingTable.containsKey(char_to_encode)) { if (null == encoded_string) { encoded_string = new StringBuffer(source.length()); } difference = i - (last_match + 1); if (difference > 0) { encoded_string.append(string_to_encode_array, last_match + 1, difference); } encoded_string.append(encodingTable.get(char_to_encode)); last_match = i; } } if (null == encoded_string) { return source; } else { difference = string_to_encode_array.length - (last_match + 1); if (difference > 0) { encoded_string.append(string_to_encode_array, last_match + 1, difference); } return encoded_string.toString(); } } } bpmn.zulzul<?xml version="1.0" encoding="UTF-8"?>  <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:drools="http://www.jboss.org/drools" xmlns="http://www.jboss.org/drools" xmlns:java="http://www.java.com/javaTypes" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd http://www.jboss.org/drools drools.xsd http://www.bpsim.org/schemas/1.0 bpsim.xsd" exporter="org.eclipse.bpmn2.modeler.core" exporterVersion="1.3.3.Final-v20170221-1647-B60" expressionLanguage="http://www.mvel.org/2.0" targetNamespace="http://www.jboss.org/drools" typeLanguage="http://www.java.com/javaTypes"> <bpmn2:process id="cat.dinet.xemicals.clp.PrecautionaryStatementsFlow" drools:version="1" drools:packageName="cat.dinet.xemicals.clp" drools:adHoc="false" name="PrecautionaryStatementsFlow" isExecutable="true"> <bpmn2:businessRuleTask id="BusinessRuleTask_1" drools:ruleFlowGroup="PrecautionaryStatements" name="Assign Precautionary Statements"> <bpmn2:extensionElements> <drools:metaData name="elementname"> <drools:metaValue><![CDATA[Assign Precautionary Statements]]></drools:metaValue> </drools:metaData> <drools:onExit-script scriptFormat="http://www.java.com/java"/> <drools:onEntry-script scriptFormat="http://www.java.com/java"/> </bpmn2:extensionElements> <bpmn2:incoming>SequenceFlow_1</bpmn2:incoming> <bpmn2:outgoing>SequenceFlow_4</bpmn2:outgoing> </bpmn2:businessRuleTask> <bpmn2:startEvent id="StartEvent_2" name="StartProcess"> <bpmn2:extensionElements> <drools:metaData name="elementname"> <drools:metaValue><![CDATA[StartProcess]]></drools:metaValue> </drools:metaData> </bpmn2:extensionElements> <bpmn2:outgoing>SequenceFlow_1</bpmn2:outgoing> </bpmn2:startEvent> <bpmn2:endEvent id="EndEvent_2" name="End"> <bpmn2:extensionElements> <drools:metaData name="elementname"> <drools:metaValue><![CDATA[End]]></drools:metaValue> </drools:metaData> </bpmn2:extensionElements> <bpmn2:incoming>SequenceFlow_4</bpmn2:incoming> <bpmn2:terminateEventDefinition id="TerminateEventDefinition_1"/> </bpmn2:endEvent> <bpmn2:sequenceFlow id="SequenceFlow_1" drools:priority="1" sourceRef="StartEvent_2" targetRef="BusinessRuleTask_1"/> <bpmn2:sequenceFlow id="SequenceFlow_4" drools:priority="1" sourceRef="BusinessRuleTask_1" targetRef="EndEvent_2"/> </bpmn2:process> <bpmndi:BPMNDiagram id="BPMNDiagram_1" name="Default Process Diagram"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="cat.dinet.xemicals.clp.PrecautionaryStatementsFlow"> <bpmndi:BPMNShape id="BPMNShape_BusinessRuleTask_1" bpmnElement="BusinessRuleTask_1" isExpanded="true"> <dc:Bounds height="50.0" width="110.0" x="270.0" y="93.0"/> <bpmndi:BPMNLabel id="BPMNLabel_3"> <dc:Bounds height="45.0" width="81.0" x="284.0" y="95.0"/> </bpmndi:BPMNLabel> </bpmndi:BPMNShape> <bpmndi:BPMNShape id="BPMNShape_StartEvent_1" bpmnElement="StartEvent_2"> <dc:Bounds height="36.0" width="36.0" x="101.0" y="100.0"/> <bpmndi:BPMNLabel> <dc:Bounds height="15.0" width="71.0" x="84.0" y="136.0"/> </bpmndi:BPMNLabel> </bpmndi:BPMNShape> <bpmndi:BPMNShape id="BPMNShape_EndEvent_1" bpmnElement="EndEvent_2"> <dc:Bounds height="36.0" width="36.0" x="450.0" y="100.0"/> <bpmndi:BPMNLabel> <dc:Bounds height="15.0" width="22.0" x="457.0" y="136.0"/> </bpmndi:BPMNLabel> </bpmndi:BPMNShape> <bpmndi:BPMNEdge id="BPMNEdge_SequenceFlow_1" bpmnElement="SequenceFlow_1" sourceElement="BPMNShape_StartEvent_1" targetElement="BPMNShape_BusinessRuleTask_1"> <di:waypoint xsi:type="dc:Point" x="137.0" y="118.0"/> <di:waypoint xsi:type="dc:Point" x="203.0" y="118.0"/> <di:waypoint xsi:type="dc:Point" x="270.0" y="118.0"/> <bpmndi:BPMNLabel/> </bpmndi:BPMNEdge> <bpmndi:BPMNEdge id="BPMNEdge_SequenceFlow_4" bpmnElement="SequenceFlow_4" sourceElement="BPMNShape_BusinessRuleTask_1" targetElement="BPMNShape_EndEvent_1"> <di:waypoint xsi:type="dc:Point" x="380.0" y="118.0"/> <di:waypoint xsi:type="dc:Point" x="415.0" y="118.0"/> <di:waypoint xsi:type="dc:Point" x="450.0" y="118.0"/> <bpmndi:BPMNLabel/> </bpmndi:BPMNEdge> </bpmndi:BPMNPlane> </bpmndi:BPMNDiagram> </bpmn2:definitions>bpmn.htmlhtml<html> <head/> <body> <div id="canvas"></div> <script> var bpmnViewer = new BpmnJS({ container: '#canvas' }); //async function openDiagram(diagramUrl) { try { await bpmnViewer.importXML(diagramUrl); var canvas = bpmnViewer.get('canvas'); canvas.zoom('fit-viewport'); } catch (err) { console.log('could not import BPMN 2.0 diagram', err); alert('could not import BPMN 2.0 diagram'); } } </script> </body> </html>