@webwriter/flowchart/snippets/Erklaerung.html

Create programming flowcharts with interactive tasks. Use standardized Elements such as loops and Branchings.

<webwriter-flowchart
   graphnodes="[{&quot;id&quot;:&quot;c0737f39-488a-459c-814f-58635a2ef78e&quot;,&quot;node&quot;:&quot;start&quot;,&quot;text&quot;:&quot;Verbindungen zeichnen&quot;,&quot;x&quot;:272.52083333333337,&quot;y&quot;:182.05000000000007,&quot;connections&quot;:[{&quot;anchor&quot;:2,&quot;direction&quot;:&quot;to&quot;,&quot;connectedToId&quot;:&quot;fdeed557-8979-4a43-9dcf-0e1e0de0cfa1&quot;,&quot;arrowID&quot;:&quot;33d3b6fb-e98f-4aa4-9c73-6f102e0a0044&quot;}]},{&quot;id&quot;:&quot;fdeed557-8979-4a43-9dcf-0e1e0de0cfa1&quot;,&quot;node&quot;:&quot;op&quot;,&quot;text&quot;:&quot;Klicke auf mich&quot;,&quot;x&quot;:301.32552083333337,&quot;y&quot;:278.05000000000007,&quot;connections&quot;:[{&quot;anchor&quot;:2,&quot;direction&quot;:&quot;to&quot;,&quot;connectedToId&quot;:&quot;ca52a350-14cc-4430-b0cd-707105ee00ea&quot;,&quot;arrowID&quot;:&quot;c5cea90f-8869-4ec3-b78c-260a970190d2&quot;,&quot;text&quot;:&quot;Ziehe gedrückt an einen der blauen Dreiecke&quot;},{&quot;anchor&quot;:0,&quot;direction&quot;:&quot;from&quot;,&quot;connectedToId&quot;:&quot;c0737f39-488a-459c-814f-58635a2ef78e&quot;,&quot;arrowID&quot;:&quot;33d3b6fb-e98f-4aa4-9c73-6f102e0a0044&quot;}]},{&quot;id&quot;:&quot;0b5abffa-9acc-40a4-8073-8c2f81e4753f&quot;,&quot;node&quot;:&quot;op&quot;,&quot;text&quot;:&quot;Doppelklick auf mich&quot;,&quot;x&quot;:730.3255208333334,&quot;y&quot;:375.05000000000007,&quot;connections&quot;:[{&quot;anchor&quot;:0,&quot;direction&quot;:&quot;from&quot;,&quot;connectedToId&quot;:&quot;1b2f6383-efe4-41ab-8a4d-ee52c7c47787&quot;,&quot;arrowID&quot;:&quot;92f75f65-eb48-470e-a46f-d202b65b5dc9&quot;},{&quot;anchor&quot;:2,&quot;direction&quot;:&quot;to&quot;,&quot;connectedToId&quot;:&quot;17d874b3-28ed-47f9-a80e-44106b97df97&quot;,&quot;arrowID&quot;:&quot;4e55fb2b-648a-4f6d-b86c-8916b41e8552&quot;,&quot;text&quot;:&quot;oder auf mich&quot;}]},{&quot;id&quot;:&quot;17d874b3-28ed-47f9-a80e-44106b97df97&quot;,&quot;node&quot;:&quot;end&quot;,&quot;text&quot;:&quot;Ende&quot;,&quot;x&quot;:807.1380208333334,&quot;y&quot;:511.05000000000007,&quot;connections&quot;:[{&quot;anchor&quot;:0,&quot;direction&quot;:&quot;from&quot;,&quot;connectedToId&quot;:&quot;0b5abffa-9acc-40a4-8073-8c2f81e4753f&quot;,&quot;arrowID&quot;:&quot;4e55fb2b-648a-4f6d-b86c-8916b41e8552&quot;,&quot;text&quot;:&quot;oder auf mich&quot;}]},{&quot;id&quot;:&quot;ca52a350-14cc-4430-b0cd-707105ee00ea&quot;,&quot;node&quot;:&quot;op&quot;,&quot;text&quot;:&quot;Lass über einen Knoten los&quot;,&quot;x&quot;:248.51692708333337,&quot;y&quot;:414.05,&quot;connections&quot;:[{&quot;anchor&quot;:0,&quot;direction&quot;:&quot;from&quot;,&quot;connectedToId&quot;:&quot;fdeed557-8979-4a43-9dcf-0e1e0de0cfa1&quot;,&quot;arrowID&quot;:&quot;c5cea90f-8869-4ec3-b78c-260a970190d2&quot;,&quot;text&quot;:&quot;Ziehe gedrückt an einen der blauen Dreiecke&quot;},{&quot;anchor&quot;:2,&quot;direction&quot;:&quot;to&quot;,&quot;connectedToId&quot;:&quot;b23ab7c1-8874-4e50-851f-dc8824c4b651&quot;,&quot;arrowID&quot;:&quot;96b7fc8c-e720-41c8-8fd7-c6984c06b840&quot;,&quot;text&quot;:&quot;Die Andockstelle ist der nähste Mittelpunkt einer Kante&quot;}]},{&quot;id&quot;:&quot;b23ab7c1-8874-4e50-851f-dc8824c4b651&quot;,&quot;node&quot;:&quot;op&quot;,&quot;text&quot;:&quot;Der Pfeil kann wieder versetzt werden&quot;,&quot;x&quot;:205.30989583333337,&quot;y&quot;:543.05,&quot;connections&quot;:[{&quot;anchor&quot;:0,&quot;direction&quot;:&quot;from&quot;,&quot;connectedToId&quot;:&quot;ca52a350-14cc-4430-b0cd-707105ee00ea&quot;,&quot;arrowID&quot;:&quot;96b7fc8c-e720-41c8-8fd7-c6984c06b840&quot;,&quot;text&quot;:&quot;Die Andockstelle ist der nähste Mittelpunkt einer Kante&quot;},{&quot;anchor&quot;:2,&quot;direction&quot;:&quot;to&quot;,&quot;connectedToId&quot;:&quot;5f620748-1dff-483a-88ca-768532bc210e&quot;,&quot;arrowID&quot;:&quot;7b3d9d9d-47fc-4a70-9d7d-ceb54be372df&quot;,&quot;text&quot;:&quot;Klick auf mich und zieh an dem Kreis an der Spitze&quot;}]},{&quot;id&quot;:&quot;5f620748-1dff-483a-88ca-768532bc210e&quot;,&quot;node&quot;:&quot;end&quot;,&quot;text&quot;:&quot;Ende&quot;,&quot;x&quot;:354.13411458333337,&quot;y&quot;:667.0500000000001,&quot;connections&quot;:[{&quot;anchor&quot;:0,&quot;direction&quot;:&quot;from&quot;,&quot;connectedToId&quot;:&quot;b23ab7c1-8874-4e50-851f-dc8824c4b651&quot;,&quot;arrowID&quot;:&quot;7b3d9d9d-47fc-4a70-9d7d-ceb54be372df&quot;,&quot;text&quot;:&quot;Klick auf mich und zieh an dem Kreis an der Spitze&quot;}]},{&quot;id&quot;:&quot;793d949b-653d-417b-b5d7-356dad8ee794&quot;,&quot;node&quot;:&quot;end&quot;,&quot;text&quot;:&quot;Ende&quot;,&quot;x&quot;:1226.7356770833335,&quot;y&quot;:561.05,&quot;connections&quot;:[{&quot;anchor&quot;:0,&quot;direction&quot;:&quot;from&quot;,&quot;connectedToId&quot;:&quot;ee473c62-9891-4a37-9c35-bcc4e0d82efb&quot;,&quot;arrowID&quot;:&quot;f6f51fe7-6e0e-4a13-b517-c01e6f8519f3&quot;}]},{&quot;id&quot;:&quot;1b2f6383-efe4-41ab-8a4d-ee52c7c47787&quot;,&quot;node&quot;:&quot;start&quot;,&quot;text&quot;:&quot;Textändern&quot;,&quot;x&quot;:778.3333333333334,&quot;y&quot;:278.05000000000007,&quot;connections&quot;:[{&quot;anchor&quot;:2,&quot;direction&quot;:&quot;to&quot;,&quot;connectedToId&quot;:&quot;0b5abffa-9acc-40a4-8073-8c2f81e4753f&quot;,&quot;arrowID&quot;:&quot;92f75f65-eb48-470e-a46f-d202b65b5dc9&quot;}]},{&quot;id&quot;:&quot;ddb384b8-a812-4460-9529-1836d2a340de&quot;,&quot;node&quot;:&quot;start&quot;,&quot;text&quot;:&quot;Löschen&quot;,&quot;x&quot;:1212.3333333333335,&quot;y&quot;:219.05000000000007,&quot;connections&quot;:[{&quot;anchor&quot;:2,&quot;direction&quot;:&quot;to&quot;,&quot;connectedToId&quot;:&quot;cb15934a-59a5-4c53-8b8c-b8fb8d9e214d&quot;,&quot;arrowID&quot;:&quot;2d08f291-eca6-41b5-bd8f-82f39be320ab&quot;}]},{&quot;id&quot;:&quot;ee473c62-9891-4a37-9c35-bcc4e0d82efb&quot;,&quot;node&quot;:&quot;op&quot;,&quot;text&quot;:&quot;'Alles löschen' mithilfe dem Mülleimer-Button&quot;,&quot;x&quot;:1029.9036458333335,&quot;y&quot;:464.05000000000007,&quot;connections&quot;:[{&quot;anchor&quot;:0,&quot;direction&quot;:&quot;from&quot;,&quot;connectedToId&quot;:&quot;cb15934a-59a5-4c53-8b8c-b8fb8d9e214d&quot;,&quot;arrowID&quot;:&quot;2022a0c1-617e-4483-aebf-87d5216e4586&quot;,&quot;text&quot;:&quot;oder über die Tasten: 'esc' und 'backspace'&quot;},{&quot;anchor&quot;:2,&quot;direction&quot;:&quot;to&quot;,&quot;connectedToId&quot;:&quot;793d949b-653d-417b-b5d7-356dad8ee794&quot;,&quot;arrowID&quot;:&quot;f6f51fe7-6e0e-4a13-b517-c01e6f8519f3&quot;}]},{&quot;id&quot;:&quot;cb15934a-59a5-4c53-8b8c-b8fb8d9e214d&quot;,&quot;node&quot;:&quot;op&quot;,&quot;text&quot;:&quot;Rechtsklick auf ein Element&quot;,&quot;x&quot;:1116.3177083333335,&quot;y&quot;:319.05000000000007,&quot;connections&quot;:[{&quot;anchor&quot;:0,&quot;direction&quot;:&quot;from&quot;,&quot;connectedToId&quot;:&quot;ddb384b8-a812-4460-9529-1836d2a340de&quot;,&quot;arrowID&quot;:&quot;2d08f291-eca6-41b5-bd8f-82f39be320ab&quot;},{&quot;anchor&quot;:2,&quot;direction&quot;:&quot;to&quot;,&quot;connectedToId&quot;:&quot;ee473c62-9891-4a37-9c35-bcc4e0d82efb&quot;,&quot;arrowID&quot;:&quot;2022a0c1-617e-4483-aebf-87d5216e4586&quot;,&quot;text&quot;:&quot;oder über die Tasten: 'esc' und 'backspace'&quot;}]}]"
   tasklist="[]"
   helplist="[]"
   height="400"
   zoomlevel="50"
   canvasoffsetx="0"
   canvasoffsety="0"
   font="Courier New"
   fontsize="16"
   theme="standard"></webwriter-flowchart>