Diagrams
Mix.install([:kino_kroki])
Section
Kino.Kroki.new(
"{\n \"type\": \"excalidraw\",\n \"version\": 2,\n \"source\": \"https://excalidraw.com\",\n \"elements\": [\n {\n \"type\": \"rectangle\",\n \"version\": 175,\n \"versionNonce\": 279344008,\n \"isDeleted\": false,\n \"id\": \"2ZYh24ed28FJ0yE-S3YNY\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 580,\n \"y\": 140,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#15aabf\",\n \"width\": 80,\n \"height\": 19.999999999999996,\n \"seed\": 521916552,\n \"groupIds\": [],\n \"strokeSharpness\": \"sharp\",\n \"boundElementIds\": [\n \"Be1y2yzhV3Zd4nwCro__8\"\n ]\n },\n {\n \"type\": \"rectangle\",\n \"version\": 180,\n \"versionNonce\": 164784376,\n \"isDeleted\": false,\n \"id\": \"bO0OVt6m7LowYpq22ePCA\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 660,\n \"y\": 140,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#4c6ef5\",\n \"width\": 120,\n \"height\": 19.999999999999996,\n \"seed\": 1303206904,\n \"groupIds\": [],\n \"strokeSharpness\": \"sharp\",\n \"boundElementIds\": [\n \"KaCO9-QjUenSyCuuanoTo\"\n ]\n },\n {\n \"type\": \"rectangle\",\n \"version\": 183,\n \"versionNonce\": 27181704,\n \"isDeleted\": false,\n \"id\": \"jz0Huq9-s6pNxDw0RqHcR\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 780,\n \"y\": 140,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#fab005\",\n \"width\": 180,\n \"height\": 19.999999999999996,\n \"seed\": 861962120,\n \"groupIds\": [],\n \"strokeSharpness\": \"sharp\",\n \"boundElementIds\": [\n \"74ifmqmu0vN0NK0_0FwPm\"\n ]\n },\n {\n \"type\": \"rectangle\",\n \"version\": 192,\n \"versionNonce\": 2123008504,\n \"isDeleted\": false,\n \"id\": \"UnmNTmwJtm6moubcGtSgB\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 960,\n \"y\": 140,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#fa5252\",\n \"width\": 80,\n \"height\": 19.999999999999996,\n \"seed\": 277814520,\n \"groupIds\": [],\n \"strokeSharpness\": \"sharp\",\n \"boundElementIds\": [\n \"1v60NED2criGG-wo9-oQL\"\n ]\n },\n {\n \"type\": \"rectangle\",\n \"version\": 202,\n \"versionNonce\": 1823814024,\n \"isDeleted\": false,\n \"id\": \"of76J4WOJHnHi0L61Vst_\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 1040,\n \"y\": 140,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#be4bdb\",\n \"width\": 180,\n \"height\": 19.999999999999996,\n \"seed\": 1496796808,\n \"groupIds\": [],\n \"strokeSharpness\": \"sharp\",\n \"boundElementIds\": [\n \"jjuPzyRneMv3f65lps_6a\"\n ]\n },\n {\n \"type\": \"rectangle\",\n \"version\": 193,\n \"versionNonce\": 1234602744,\n \"isDeleted\": false,\n \"id\": \"SlvbjeV-9lXbcrlKib-hj\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 1220,\n \"y\": 140,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#868e96\",\n \"width\": 60,\n \"height\": 19.999999999999996,\n \"seed\": 1938865656,\n \"groupIds\": [],\n \"strokeSharpness\": \"sharp\",\n \"boundElementIds\": [\n \"5QQzhw_uqk_rBaW2wMriT\"\n ]\n },\n {\n \"type\": \"text\",\n \"version\": 81,\n \"versionNonce\": 1188901129,\n \"isDeleted\": false,\n \"id\": \"vrdt3JfbD2Xwz4K4TWScI\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 840,\n \"y\": -60,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#868e96\",\n \"width\": 190,\n \"height\": 45,\n \"seed\": 1499217288,\n \"groupIds\": [],\n \"strokeSharpness\": \"sharp\",\n \"boundElementIds\": [],\n \"fontSize\": 36,\n \"fontFamily\": 1,\n \"text\": \"JavaScript\",\n \"baseline\": 32,\n \"textAlign\": \"left\",\n \"verticalAlign\": \"top\"\n },\n {\n \"type\": \"arrow\",\n \"version\": 343,\n \"versionNonce\": 1369065096,\n \"isDeleted\": false,\n \"id\": \"Be1y2yzhV3Zd4nwCro__8\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 597.5075333823274,\n \"y\": 299,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#868e96\",\n \"width\": 40,\n \"height\": 139,\n \"seed\": 666255096,\n \"groupIds\": [],\n \"strokeSharpness\": \"round\",\n \"boundElementIds\": [],\n \"startBinding\": {\n \"focus\": -0.41953339688473495,\n \"gap\": 1,\n \"elementId\": \"UxgtvUBaIPnDWJZ9kUQH8\"\n },\n \"endBinding\": {\n \"focus\": -0.11111111111111113,\n \"gap\": 1,\n \"elementId\": \"2ZYh24ed28FJ0yE-S3YNY\"\n },\n \"points\": [\n [\n 0,\n 0\n ],\n [\n -17.507533382327438,\n -59\n ],\n [\n 22.492466617672562,\n -139\n ]\n ],\n \"lastCommittedPoint\": null,\n \"startArrowhead\": null,\n \"endArrowhead\": \"arrow\"\n },\n {\n \"type\": \"text\",\n \"version\": 81,\n \"versionNonce\": 690339976,\n \"isDeleted\": false,\n \"id\": \"UxgtvUBaIPnDWJZ9kUQH8\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 580,\n \"y\": 300,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#868e96\",\n \"width\": 94,\n \"height\": 45,\n \"seed\": 84626568,\n \"groupIds\": [],\n \"strokeSharpness\": \"sharp\",\n \"boundElementIds\": [\n \"Be1y2yzhV3Zd4nwCro__8\"\n ],\n \"fontSize\": 36,\n \"fontFamily\": 1,\n \"text\": \"Fetch\",\n \"baseline\": 32,\n \"textAlign\": \"left\",\n \"verticalAlign\": \"top\"\n },\n {\n \"type\": \"rectangle\",\n \"version\": 60,\n \"versionNonce\": 897215480,\n \"isDeleted\": false,\n \"id\": \"-Lq0agjWQ31TR_Av5Z4HW\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 520,\n \"y\": -60,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"transparent\",\n \"width\": 820,\n \"height\": 540,\n \"seed\": 495165432,\n \"groupIds\": [],\n \"strokeSharpness\": \"sharp\",\n \"boundElementIds\": [\n \"jjuPzyRneMv3f65lps_6a\"\n ]\n },\n {\n \"type\": \"arrow\",\n \"version\": 537,\n \"versionNonce\": 1626949112,\n \"isDeleted\": false,\n \"id\": \"KaCO9-QjUenSyCuuanoTo\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 721.0588599991052,\n \"y\": 60.17790458606555,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#868e96\",\n \"width\": 1.0588599991051524,\n \"height\": 79.82209541393445,\n \"seed\": 637565832,\n \"groupIds\": [],\n \"strokeSharpness\": \"round\",\n \"boundElementIds\": [],\n \"startBinding\": null,\n \"endBinding\": {\n \"focus\": 0,\n \"gap\": 1,\n \"elementId\": \"bO0OVt6m7LowYpq22ePCA\"\n },\n \"points\": [\n [\n 0,\n 0\n ],\n [\n -1.0588599991051524,\n 39.82209541393445\n ],\n [\n -1.0588599991051524,\n 79.82209541393445\n ]\n ],\n \"lastCommittedPoint\": null,\n \"startArrowhead\": null,\n \"endArrowhead\": \"arrow\"\n },\n {\n \"type\": \"text\",\n \"version\": 112,\n \"versionNonce\": 358083143,\n \"isDeleted\": false,\n \"id\": \"4hEOdlcwK6AHyVhjc-MXS\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 660,\n \"y\": 20,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#868e96\",\n \"width\": 103,\n \"height\": 45,\n \"seed\": 352116984,\n \"groupIds\": [],\n \"strokeSharpness\": \"sharp\",\n \"boundElementIds\": [],\n \"fontSize\": 36,\n \"fontFamily\": 1,\n \"text\": \"Parse\",\n \"baseline\": 32,\n \"textAlign\": \"left\",\n \"verticalAlign\": \"top\"\n },\n {\n \"type\": \"arrow\",\n \"version\": 534,\n \"versionNonce\": 983577992,\n \"isDeleted\": false,\n \"id\": \"74ifmqmu0vN0NK0_0FwPm\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 841.6574209245741,\n \"y\": 219,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#868e96\",\n \"width\": 43.15128973100309,\n \"height\": 59.174989629909305,\n \"seed\": 1853344392,\n \"groupIds\": [],\n \"strokeSharpness\": \"round\",\n \"boundElementIds\": [],\n \"startBinding\": {\n \"focus\": 0.09211398277003865,\n \"gap\": 1,\n \"elementId\": \"K4so-arfr0JX0NJx8vd7T\"\n },\n \"endBinding\": {\n \"focus\": -0.2163077865936296,\n \"gap\": 1,\n \"elementId\": \"jz0Huq9-s6pNxDw0RqHcR\"\n },\n \"points\": [\n [\n 0,\n 0\n ],\n [\n -1.6574209245741258,\n 1\n ],\n [\n 41.493868806428964,\n -58.174989629909305\n ]\n ],\n \"lastCommittedPoint\": null,\n \"startArrowhead\": null,\n \"endArrowhead\": \"arrow\"\n },\n {\n \"type\": \"text\",\n \"version\": 118,\n \"versionNonce\": 1185705864,\n \"isDeleted\": false,\n \"id\": \"K4so-arfr0JX0NJx8vd7T\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 640,\n \"y\": 220,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#868e96\",\n \"width\": 366,\n \"height\": 45,\n \"seed\": 765854200,\n \"groupIds\": [],\n \"strokeSharpness\": \"sharp\",\n \"boundElementIds\": [\n \"74ifmqmu0vN0NK0_0FwPm\"\n ],\n \"fontSize\": 36,\n \"fontFamily\": 1,\n \"text\": \"Compile and Optimize\",\n \"baseline\": 32,\n \"textAlign\": \"left\",\n \"verticalAlign\": \"top\"\n },\n {\n \"type\": \"arrow\",\n \"version\": 791,\n \"versionNonce\": 1724761848,\n \"isDeleted\": false,\n \"id\": \"1v60NED2criGG-wo9-oQL\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 960,\n \"y\": 320,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#868e96\",\n \"width\": 80,\n \"height\": 160,\n \"seed\": 1764571528,\n \"groupIds\": [],\n \"strokeSharpness\": \"round\",\n \"boundElementIds\": [],\n \"startBinding\": {\n \"focus\": -0.1637630662020906,\n \"gap\": 1,\n \"elementId\": \"dviXudWNxiHYQMZfqHWsH\"\n },\n \"endBinding\": {\n \"focus\": 0.07692307692307691,\n \"gap\": 1,\n \"elementId\": \"UnmNTmwJtm6moubcGtSgB\"\n },\n \"points\": [\n [\n 0,\n 0\n ],\n [\n 80,\n -40\n ],\n [\n 40,\n -160\n ]\n ],\n \"lastCommittedPoint\": null,\n \"startArrowhead\": null,\n \"endArrowhead\": \"arrow\"\n },\n {\n \"type\": \"text\",\n \"version\": 194,\n \"versionNonce\": 473574648,\n \"isDeleted\": false,\n \"id\": \"dviXudWNxiHYQMZfqHWsH\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 720,\n \"y\": 320,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#868e96\",\n \"width\": 484,\n \"height\": 45,\n \"seed\": 1988297464,\n \"groupIds\": [],\n \"strokeSharpness\": \"sharp\",\n \"boundElementIds\": [\n \"1v60NED2criGG-wo9-oQL\"\n ],\n \"fontSize\": 36,\n \"fontFamily\": 1,\n \"text\": \"Re-optimize and Deoptimize\",\n \"baseline\": 32,\n \"textAlign\": \"left\",\n \"verticalAlign\": \"top\"\n },\n {\n \"type\": \"arrow\",\n \"version\": 708,\n \"versionNonce\": 185615496,\n \"isDeleted\": false,\n \"id\": \"jjuPzyRneMv3f65lps_6a\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 1140,\n \"y\": 80,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#868e96\",\n \"width\": 20,\n \"height\": 60,\n \"seed\": 1767688328,\n \"groupIds\": [],\n \"strokeSharpness\": \"round\",\n \"boundElementIds\": [],\n \"startBinding\": {\n \"focus\": -0.3021784319542362,\n \"gap\": 14.800415739789742,\n \"elementId\": \"qhkjvI1VmWZdnKvU5QKZK\"\n },\n \"endBinding\": {\n \"focus\": 0.15789473684210528,\n \"gap\": 1,\n \"elementId\": \"of76J4WOJHnHi0L61Vst_\"\n },\n \"points\": [\n [\n 0,\n 0\n ],\n [\n -20,\n 20\n ],\n [\n 0,\n 60\n ]\n ],\n \"lastCommittedPoint\": null,\n \"startArrowhead\": null,\n \"endArrowhead\": \"arrow\"\n },\n {\n \"type\": \"text\",\n \"version\": 213,\n \"versionNonce\": 2105884296,\n \"isDeleted\": false,\n \"id\": \"qhkjvI1VmWZdnKvU5QKZK\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 1080,\n \"y\": 20.19958426021026,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#868e96\",\n \"width\": 139,\n \"height\": 45,\n \"seed\": 2115494904,\n \"groupIds\": [],\n \"strokeSharpness\": \"sharp\",\n \"boundElementIds\": [\n \"jjuPzyRneMv3f65lps_6a\"\n ],\n \"fontSize\": 36,\n \"fontFamily\": 1,\n \"text\": \"Execute\",\n \"baseline\": 32,\n \"textAlign\": \"left\",\n \"verticalAlign\": \"top\"\n },\n {\n \"type\": \"arrow\",\n \"version\": 707,\n \"versionNonce\": 543827960,\n \"isDeleted\": false,\n \"id\": \"5QQzhw_uqk_rBaW2wMriT\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 1220,\n \"y\": 240,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#868e96\",\n \"width\": 20,\n \"height\": 80,\n \"seed\": 2059564936,\n \"groupIds\": [],\n \"strokeSharpness\": \"round\",\n \"boundElementIds\": [],\n \"startBinding\": {\n \"focus\": 0.7391304347826086,\n \"gap\": 2,\n \"elementId\": \"C6fyzTg2FHAmrRYfC_THm\"\n },\n \"endBinding\": {\n \"focus\": 0.3333333333333333,\n \"gap\": 1,\n \"elementId\": \"SlvbjeV-9lXbcrlKib-hj\"\n },\n \"points\": [\n [\n 0,\n 0\n ],\n [\n 20,\n -40\n ],\n [\n 20,\n -80\n ]\n ],\n \"lastCommittedPoint\": null,\n \"startArrowhead\": null,\n \"endArrowhead\": \"arrow\"\n },\n {\n \"type\": \"text\",\n \"version\": 227,\n \"versionNonce\": 2002374136,\n \"isDeleted\": false,\n \"id\": \"C6fyzTg2FHAmrRYfC_THm\",\n \"fillStyle\": \"hachure\",\n \"strokeWidth\": 1,\n \"strokeStyle\": \"solid\",\n \"roughness\": 1,\n \"opacity\": 100,\n \"angle\": 0,\n \"x\": 1160,\n \"y\": 220,\n \"strokeColor\": \"#000000\",\n \"backgroundColor\": \"#868e96\",\n \"width\": 58,\n \"height\": 45,\n \"seed\": 1651025144,\n \"groupIds\": [],\n \"strokeSharpness\": \"sharp\",\n \"boundElementIds\": [\n \"5QQzhw_uqk_rBaW2wMriT\"\n ],\n \"fontSize\": 36,\n \"fontFamily\": 1,\n \"text\": \"GC\",\n \"baseline\": 32,\n \"textAlign\": \"left\",\n \"verticalAlign\": \"top\"\n }\n ],\n \"appState\": {\n \"viewBackgroundColor\": \"#ffffff\",\n \"gridSize\": 20\n }\n}",
"excalidraw"
)
graph = """
digraph G { bgcolor="purple:pink" label="agraph" fontcolor="white"
fontname="Helvetica,Arial,sans-serif"
node [fontname="Helvetica,Arial,sans-serif"]
edge [fontname="Helvetica,Arial,sans-serif"]
subgraph cluster1 {fillcolor="blue:cyan" label="acluster" fontcolor="white" style="filled" gradientangle="270"
node [shape=box fillcolor="red:yellow" style="filled" gradientangle=90]
anode;
}
}
"""
Kino.Kroki.new(graph, :graphviz)
