"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6467"],{8317:function(e,n,a){a.r(n),a.d(n,{default:()=>g,frontMatter:()=>d,metadata:()=>i,assets:()=>r,toc:()=>h,contentTitle:()=>c});var i=JSON.parse('{"id":"languages/diagrams","title":"Diagrams","description":"Overview","source":"@site/docs/languages/diagrams.mdx","sourceDirName":"languages","slug":"/languages/diagrams","permalink":"/docs/languages/diagrams","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/diagrams.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"cssnano","permalink":"/docs/languages/cssnano"},"next":{"title":"doT","permalink":"/docs/languages/dot"}}'),t=a("5893"),l=a("65");function s(e){let n=e.id?`/?x=id/${e.id}`:e.template?`/?template=${e.template}`:"/";return(0,t.jsx)("a",{href:n,target:"_blank",children:e.children||"open in LiveCodes"})}let d={},c="Diagrams",r={},h=[{value:"Overview",id:"overview",level:2},{value:"Usage",id:"usage",level:2},{value:"1. Add a diagram target:",id:"1-add-a-diagram-target",level:4},{value:"2. Add a script element with the diagram syntax:",id:"2-add-a-script-element-with-the-diagram-syntax",level:4},{value:"Supported Libraries",id:"supported-libraries",level:2},{value:"Cytoscape",id:"cytoscape",level:3},{value:"ELK",id:"elk",level:3},{value:"Gnuplot",id:"gnuplot",level:3},{value:"Graphviz",id:"graphviz",level:3},{value:"Mermaid",id:"mermaid",level:3},{value:"Nomnoml",id:"nomnoml",level:3},{value:"Pintora",id:"pintora",level:3},{value:"Plotly",id:"plotly",level:3},{value:"Svgbob",id:"svgbob",level:3},{value:"Vega",id:"vega",level:3},{value:"VegaLite",id:"vegalite",level:3},{value:"WaveDrom",id:"wavedrom",level:3}];function o(e){let n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,l.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"diagrams",children:"Diagrams"})}),"\n","\n",(0,t.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,t.jsx)(n.p,{children:"Diagrams-as-code."}),"\n",(0,t.jsxs)(n.p,{children:["Allows using syntax for multiple visualization libraries inside HTML to produce diagrams.\nThe rendered diagrams are added to the ",(0,t.jsx)(n.a,{href:"/docs/features/result",children:"result page"})," as either:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"SVG elements (which you can style with CSS or manipulate with JavaScript)"}),"\n",(0,t.jsx)(n.li,{children:"HTML images (which you can right-click and save or open in a new window)"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Diagrams from multiple libraries can be used in the same page. Only the libraries used will be loaded in the LiveCodes playground. The result page will have no libraries (only the output SVG or images)."}),"\n",(0,t.jsx)(s,{template:"diagrams",children:"Open starter template in LiveCodes"}),"\n",(0,t.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,t.jsxs)(n.p,{children:["This code: (",(0,t.jsx)(s,{id:"2m8u9hgeiq4"}),")"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<div data-src="my-diagram"></div>\n\n<script type="application/diagram-mermaid" data-output="my-diagram">\n  graph TD\n    A--\x3eB\n    A--\x3eC\n    B--\x3eD\n    C--\x3eD\n<\/script>\n'})}),"\n",(0,t.jsx)(n.p,{children:"produces this output:"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"flow-chart",src:a(71).Z+"",width:"125",height:"232"})}),"\n",(0,t.jsx)("h3",{children:"Steps"}),"\n",(0,t.jsx)(n.h4,{id:"1-add-a-diagram-target",children:"1. Add a diagram target:"}),"\n",(0,t.jsxs)(n.p,{children:["The target element should have a ",(0,t.jsx)(n.code,{children:"data-src"})," attribute."]}),"\n",(0,t.jsx)(n.p,{children:"It can be an HTML element (the SVG of the diagram will be embedded as a child element)"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<div data-src="my-diagram"></div>\n'})}),"\n",(0,t.jsx)(n.p,{children:"becomes"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<div data-src="my-diagram"><svg ...>...</svg></div>\n'})}),"\n",(0,t.jsxs)(n.p,{children:["or an HTML image element (the diagram will be added to its ",(0,t.jsx)(n.code,{children:"src"})," attribute as a ",(0,t.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs",children:"data URL"}),")"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<img data-src="my-diagram" />\n'})}),"\n",(0,t.jsx)(n.p,{children:"becomes"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<img data-src="my-diagram" src="data:image/svg+xml;base64,..." />\n'})}),"\n",(0,t.jsxs)(n.p,{children:["There can be more that one target element for the same diagram if they have the same ",(0,t.jsx)(n.code,{children:"data-src"})," attribute."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<div data-src="my-diagram"></div>\n<img data-src="my-diagram" />\n'})}),"\n",(0,t.jsx)(n.h4,{id:"2-add-a-script-element-with-the-diagram-syntax",children:"2. Add a script element with the diagram syntax:"}),"\n",(0,t.jsx)(n.p,{children:"It should have:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["an attribute ",(0,t.jsx)(n.code,{children:'type="application/diagram-{diagram type}"'})," that specifies the diagram type (e.g. ",(0,t.jsx)(n.code,{children:'type="application/diagram-mermaid"'}),")."]}),"\n",(0,t.jsxs)(n.li,{children:["a ",(0,t.jsx)(n.code,{children:"data-output"})," attribute that matches the ",(0,t.jsx)(n.code,{children:"data-src"})," attribute of the target element."]}),"\n",(0,t.jsxs)(n.li,{children:["the syntax of the diagram is the content of the script element or the content of a file linked by the ",(0,t.jsx)(n.code,{children:"src"})," attribute."]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<script type="application/diagram-mermaid" data-output="my-diagram">\n  graph TD\n    A--\x3eB\n    A--\x3eC\n    B--\x3eD\n    C--\x3eD\n<\/script>\n\n<script\n  type="application/diagram-mermaid"\n  data-output="second-diagram"\n  src="/url/to/diagram/syntax"\n><\/script>\n'})}),"\n",(0,t.jsx)(n.h2,{id:"supported-libraries",children:"Supported Libraries"}),"\n",(0,t.jsx)(n.h3,{id:"cytoscape",children:(0,t.jsx)(n.a,{href:"https://js.cytoscape.org/",children:"Cytoscape"})}),"\n",(0,t.jsxs)(n.p,{children:["The diagram syntax is JSON representing ",(0,t.jsx)(n.a,{href:"https://js.cytoscape.org/#getting-started/specifying-basic-options",children:"Cytoscape options"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["Please note that reference to JavaScript objects cannot be used.",(0,t.jsx)("br",{})," e.g. do not use ",(0,t.jsx)(n.code,{children:"{container: document.getElementById('cy')}"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["Example: (",(0,t.jsx)(s,{id:"nq6954cuvgs"}),")"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<div data-src="cytoscape.svg"></div>\n<script type="application/diagram-cytoscape" data-output="cytoscape.svg">\n  {\n    "elements": [\n      {\n        "data": { "id": "a" }},\n      {\n        "data": { "id": "b" }},\n      {\n        "data": { "id": "ab", "source": "a", "target": "b" }}],\n\n    "style": [\n      {\n        "selector": "node",\n        "style": {\n          "background-color": "#666",\n          "label": "data(id)"}\n      },\n\n      {\n        "selector": "edge",\n        "style": {\n          "width": 3,\n          "line-color": "#ccc",\n          "target-arrow-color": "#ccc",\n          "target-arrow-shape": "triangle",\n          "curve-style": "bezier"\n        }\n      }\n    ],\n\n    "layout": {\n      "name": "grid",\n      "rows": 1\n    }\n\n  }\n<\/script>\n'})}),"\n",(0,t.jsx)(n.h3,{id:"elk",children:(0,t.jsx)(n.a,{href:"https://www.eclipse.org/elk/",children:"ELK"})}),"\n",(0,t.jsxs)(n.p,{children:["Diagram layout is produced using ",(0,t.jsx)(n.a,{href:"https://github.com/kieler/elkjs",children:"elkjs"})," and rendered using ",(0,t.jsx)(n.a,{href:"https://github.com/EmilStenstrom/elkjs-svg",children:"elkjs-svg"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The syntax used is ",(0,t.jsx)(n.a,{href:"https://www.eclipse.org/elk/documentation/tooldevelopers/graphdatastructure/jsonformat.html",children:"ELK JSON"})," format. ",(0,t.jsx)("br",{}),"ELK text format is not supported! (You may use ",(0,t.jsx)(n.a,{href:"https://rtsys.informatik.uni-kiel.de/elklive/conversion.html",children:"this tool"})," to convert formats)"]}),"\n",(0,t.jsxs)(n.p,{children:["Example: (",(0,t.jsx)(s,{id:"49cbr5k3z69"}),")"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<div data-src="elk.svg"></div>\n<script type="application/diagram-elk" data-output="elk.svg">\n  {\n    "id": "root",\n    "layoutOptions": {\n      "elk.algorithm": "layered"\n    },\n    "children": [\n      {"id": "n1", "width": 70, "height": 70},\n      {"id": "n2", "width": 70, "height": 70},\n      {"id": "n3", "width": 70, "height": 70},\n      {"id": "n4", "width": 70, "height": 70},\n      {"id": "n5", "width": 70, "height": 70},\n      {"id": "n6", "width": 70, "height": 70}\n    ],\n    "edges": [\n      {"id": "e1", "sources": ["n1"], "targets": ["n2"]},\n      {"id": "e2", "sources": ["n1"], "targets": ["n3"]},\n      {"id": "e3", "sources": ["n2"], "targets": ["n4"]},\n      {"id": "e4", "sources": ["n3"], "targets": ["n5"]},\n      {"id": "e5", "sources": ["n5"], "targets": ["n6"]},\n      {"id": "e6", "sources": ["n4"], "targets": ["n6"]}\n    ]\n  }\n<\/script>\n'})}),"\n",(0,t.jsx)(n.h3,{id:"gnuplot",children:(0,t.jsx)(n.a,{href:"http://www.gnuplot.info/",children:"Gnuplot"})}),"\n",(0,t.jsxs)(n.p,{children:["using ",(0,t.jsx)(n.a,{href:"https://github.com/chhu/gnuplot-JS",children:"gnuplot-JS"})]}),"\n",(0,t.jsxs)(n.p,{children:["Instead of using ",(0,t.jsx)(n.code,{children:"data-output"})," attribute in the ",(0,t.jsx)(n.a,{href:"#2-add-a-script-element-with-the-diagram-syntax",children:"script element"}),", the statement ",(0,t.jsx)(n.code,{children:"set output"})," is used in the diagram syntax (see highlighted lines below)."]}),"\n",(0,t.jsxs)(n.p,{children:["Data files are also specified in the diagram syntax (see highlighted lines below).\nThey are defined in script elements with the attribute ",(0,t.jsx)(n.code,{children:'type="application/diagram-gnuplot-file"'}),". The file name is specified in ",(0,t.jsx)(n.code,{children:"data-file"})," attribute and either have inline content or linked to with a ",(0,t.jsx)(n.code,{children:"src"})," attribute."]}),"\n",(0,t.jsxs)(n.p,{children:["Example: (",(0,t.jsx)(s,{id:"45tardc2qaz"}),")"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",metastring:"{4,22}",children:'<div data-src="contour.svg"></div>\n<script type="application/diagram-gnuplot">\n  set terminal svg size 600,400 enhanced fname \'arial\' fsize 10 butt solid\n  set output \'contour.svg\'\n  set view 60, 30, 0.85, 1.1\n  set samples 25, 25\n  set isosamples 26, 26\n  set contour base\n  set cntrparam bspline\n  set cntrparam levels auto 10\n  set style data lines\n  set title "3D gnuplot demo - contour of data grid plotting"\n  set xlabel "X axis"\n  set xrange [ 0.00000 : 15.0000 ] noreverse nowriteback\n  set ylabel "Y axis"\n  set yrange [ 0.00000 : 15.0000 ] noreverse nowriteback\n  set zlabel "Z axis"\n  set zlabel  offset character 1, 0, 0 font "" textcolor lt -1 norotate\n  set zrange [ -1.20000 : 1.20000 ] noreverse nowriteback\n\n  # "glass.dat" is defined below\n  splot "glass.dat" using 1\n<\/script>\n\n\x3c!--  data file --\x3e\n<script\n  type="application/diagram-gnuplot-file"\n  data-file="glass.dat"\n  src="https://raw.githubusercontent.com/gnuplot/gnuplot/master/demo/glass.dat"\n><\/script>\n\n\x3c!--  or inline data in a script block --\x3e\n<script type="application/diagram-gnuplot-file" data-file="another-file.dat">\n  0.568000   0.000000  -0.911000\n  0.518894   0.231026  -0.911000\n  0.380066   0.422106  -0.911000\n  0.175522   0.540200  -0.911000\n  -0.059372   0.564888  -0.911000\n<\/script>\n'})}),"\n",(0,t.jsx)(n.h3,{id:"graphviz",children:(0,t.jsx)(n.a,{href:"https://graphviz.org/",children:"Graphviz"})}),"\n",(0,t.jsxs)(n.p,{children:["using ",(0,t.jsx)(n.a,{href:"https://github.com/hpcc-systems/hpcc-js-wasm",children:"@hpcc-js/wasm"})]}),"\n",(0,t.jsxs)(n.p,{children:["The following ",(0,t.jsx)(n.a,{href:"https://graphviz.org/docs/layouts/",children:"layout engines"})," are supported:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"dot"}),"\n",(0,t.jsx)(n.li,{children:"neato"}),"\n",(0,t.jsx)(n.li,{children:"fdp"}),"\n",(0,t.jsx)(n.li,{children:"sfdp"}),"\n",(0,t.jsx)(n.li,{children:"circo"}),"\n",(0,t.jsx)(n.li,{children:"twopi"}),"\n",(0,t.jsx)(n.li,{children:"osage"}),"\n",(0,t.jsx)(n.li,{children:"patchwork"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["By default, the ",(0,t.jsx)(n.code,{children:"dot"})," layout engine is used. To use a different engine add the attribute ",(0,t.jsx)(n.code,{children:"data-layout"})," to the ",(0,t.jsx)(n.a,{href:"#2-add-a-script-element-with-the-diagram-syntax",children:"script element"})," with the value of the required engine name, like this:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<script type="application/diagram-graphviz" data-layout="fdp" data-output="my-diagram">\n  ...\n<\/script>\n'})}),"\n",(0,t.jsxs)(n.p,{children:["Example: (",(0,t.jsx)(s,{id:"ms2c6jc4vnj"}),")"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<div data-src="flow-chart.svg"></div>\n<script type="application/diagram-graphviz" data-output="flow-chart.svg">\n  digraph G {\n    node [shape=rect];\n\n    subgraph cluster_0 {\n      style=filled;\n      color=lightgrey;\n      node [style=filled,color=white];\n      a0 -> a1 -> a2 -> a3;\n      label = "Hello";\n    }\n\n    subgraph cluster_1 {\n      node [style=filled];\n      b0 -> b1 -> b2 -> b3;\n      label = "World!";\n      color=blue\n    }\n\n    start -> a0;\n    start -> b0;\n    a1 -> b3;\n    b2 -> a3;\n    a3 -> a0;\n    a3 -> end;\n    b3 -> end;\n\n    start [shape=Mdiamond];\n    end [shape=Msquare];\n  }\n<\/script>\n'})}),"\n",(0,t.jsx)(n.h3,{id:"mermaid",children:(0,t.jsx)(n.a,{href:"https://mermaid-js.github.io/mermaid/",children:"Mermaid"})}),"\n",(0,t.jsxs)(n.p,{children:["Example: (",(0,t.jsx)(s,{id:"r9y3ubytquj"}),")"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<div data-src="class-diagram.svg"></div>\n<script type="application/diagram-mermaid" data-output="class-diagram.svg">\n  classDiagram\n  Class01 <|-- AveryLongClass : Cool\n  Class03 *-- Class04\n  Class05 o-- Class06\n  Class07 .. Class08\n  Class09 --\x3e C2 : Where am i?\n  Class09 --* C3\n  Class09 --|> Class07\n  Class07 : equals()\n  Class07 : Object[] elementData\n  Class01 : size()\n  Class01 : int chimp\n  Class01 : int gorilla\n  Class08 <--\x3e C2: Cool label\n<\/script>\n'})}),"\n",(0,t.jsx)(n.h3,{id:"nomnoml",children:(0,t.jsx)(n.a,{href:"https://nomnoml.com/",children:"Nomnoml"})}),"\n",(0,t.jsxs)(n.p,{children:["Example: (",(0,t.jsx)(s,{id:"8x45vzfnxw5"}),")"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<div data-src="nomnoml.svg"></div>\n<script type="application/diagram-nomnoml" data-output="nomnoml.svg">\n  [Pirate|eyeCount: Int|raid();pillage()|\n    [beard]--[parrot]\n    [beard]-:>[foul mouth]\n  ]\n\n  [<table>mischief | bawl | sing || yell | drink]\n\n  [<abstract>Marauder]<:--[Pirate]\n  [Pirate]- 0..7[mischief]\n  [jollyness]->[Pirate]\n  [jollyness]->[rum]\n  [jollyness]->[singing]\n  [Pirate]-> *[rum|tastiness: Int|swig()]\n  [Pirate]->[singing]\n  [singing]<->[rum]\n<\/script>\n'})}),"\n",(0,t.jsx)(n.h3,{id:"pintora",children:(0,t.jsx)(n.a,{href:"https://pintorajs.vercel.app/",children:"Pintora"})}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.a,{href:"https://pintorajs.vercel.app/docs/configuration/config",children:"Pintora config"})," object can be specified in ",(0,t.jsx)(n.a,{href:"/docs/advanced/custom-settings",children:"custom settings"}),", under the key ",(0,t.jsx)(n.code,{children:"pintora"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Example Custom Settings:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-json",children:'{\n  "pintora": {\n    "themeConfig": {\n      "theme": "dark"\n    }\n  }\n}\n'})}),"\n",(0,t.jsxs)(n.p,{children:["Example: (",(0,t.jsx)(s,{id:"9ygd8w4jfai"}),")"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<div data-src="pintora.svg"></div>\n<script type="application/diagram-pintora" data-output="pintora.svg">\n  sequenceDiagram\n    Frida--\x3e>Georgia: Flowers are beautiful\n    @note over Frida,Georgia: Painters\n    @note right of Georgia: Right\n    @note left of Georgia\n    multiline\n    note\n    @end_note\n<\/script>\n'})}),"\n",(0,t.jsx)(n.h3,{id:"plotly",children:(0,t.jsx)(n.a,{href:"https://plotly.com/graphing-libraries/",children:"Plotly"})}),"\n",(0,t.jsxs)(n.p,{children:["The diagram syntax is a JSON object with ",(0,t.jsx)(n.code,{children:"data"})," and ",(0,t.jsx)(n.code,{children:"layout"})," properties (see ",(0,t.jsx)(n.a,{href:"https://plotly.com/javascript/reference/index/",children:"Plotly reference"}),")."]}),"\n",(0,t.jsx)(n.p,{children:"Please note that the output is a non-interactive SVG element or image. The plotly library is not loaded in the result page, so any JavaScript functionality is not available."}),"\n",(0,t.jsxs)(n.p,{children:["Example: (",(0,t.jsx)(s,{id:"c9teuatsfk6"}),")"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<div data-src="plotly.svg"></div>\n<script type="application/diagram-plotly" data-output="plotly.svg">\n  {\n    "data": [\n      {\n        "y": [\n          0.2,\n          0.2,\n          0.6,\n          1,\n          0.5,\n          0.4,\n          0.2,\n          0.7,\n          0.9,\n          0.1,\n          0.5,\n          0.3\n        ],\n        "x": [\n          "day 1",\n          "day 1",\n          "day 1",\n          "day 1",\n          "day 1",\n          "day 1",\n          "day 2",\n          "day 2",\n          "day 2",\n          "day 2",\n          "day 2",\n          "day 2"\n        ],\n        "name": "kale",\n        "marker": {\n          "color": "#3D9970"\n        },\n        "type": "box"\n      },\n      {\n        "y": [\n          0.6,\n          0.7,\n          0.3,\n          0.6,\n          0,\n          0.5,\n          0.7,\n          0.9,\n          0.5,\n          0.8,\n          0.7,\n          0.2\n        ],\n        "x": [\n          "day 1",\n          "day 1",\n          "day 1",\n          "day 1",\n          "day 1",\n          "day 1",\n          "day 2",\n          "day 2",\n          "day 2",\n          "day 2",\n          "day 2",\n          "day 2"\n        ],\n        "name": "radishes",\n        "marker": {\n          "color": "#FF4136"\n        },\n        "type": "box"\n      },\n      {\n        "y": [\n          0.1,\n          0.3,\n          0.1,\n          0.9,\n          0.6,\n          0.6,\n          0.9,\n          1,\n          0.3,\n          0.6,\n          0.8,\n          0.5\n        ],\n        "x": [\n          "day 1",\n          "day 1",\n          "day 1",\n          "day 1",\n          "day 1",\n          "day 1",\n          "day 2",\n          "day 2",\n          "day 2",\n          "day 2",\n          "day 2",\n          "day 2"\n        ],\n        "name": "carrots",\n        "marker": {\n          "color": "#FF851B"\n        },\n        "type": "box"\n      }\n    ],\n    "layout": {\n      "yaxis": {\n        "title": "normalized moisture",\n        "zeroline": false\n      },\n      "boxmode": "group"\n    }\n  }\n<\/script>\n'})}),"\n",(0,t.jsx)(n.h3,{id:"svgbob",children:(0,t.jsx)(n.a,{href:"https://github.com/ivanceras/svgbob",children:"Svgbob"})}),"\n",(0,t.jsxs)(n.p,{children:["Example: (",(0,t.jsx)(s,{id:"fqe7devefsm"}),")"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<div data-src="svgbob.svg"></div>\n<script type="application/diagram-svgbob" data-output="svgbob.svg">\n  o-> Graphics Diagram\n\n     0       3                          P *\n      *-------*      +y                    \\\n   1 /|    2 /|       ^                     \\\n    *-+-----* |       |                v0    \\       v3\n    | |4    | |7      | \u25C4\u256E               *----\\-----*\n    | *-----|-*     \u2939 +-----\x3e +x        /      v X   \\\n    |/      |/       / \u2934               /        o     \\\n    *-------*       v                 /                \\\n   5       6      +z              v1 *------------------* v2\n<\/script>\n'})}),"\n",(0,t.jsx)(n.h3,{id:"vega",children:(0,t.jsx)(n.a,{href:"https://vega.github.io/vega/",children:"Vega"})}),"\n",(0,t.jsxs)(n.p,{children:["The diagram syntax is ",(0,t.jsx)(n.a,{href:"https://vega.github.io/vega/docs/#specification",children:"Vega JSON specification"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Please note that the output is a non-interactive SVG element or image. The Vega library is not loaded in the result page, so any JavaScript functionality is not available."}),"\n",(0,t.jsxs)(n.p,{children:["Example: (",(0,t.jsx)(s,{id:"m8ynr8vj7b2"}),")"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<div data-src="vega.svg"></div>\n<script\n  type="application/diagram-vega"\n  data-output="vega.svg"\n  src="https://vega.github.io/vega/examples/stacked-bar-chart.vg.json"\n><\/script>\n'})}),"\n",(0,t.jsx)(n.h3,{id:"vegalite",children:(0,t.jsx)(n.a,{href:"https://vega.github.io/vega-lite/",children:"VegaLite"})}),"\n",(0,t.jsxs)(n.p,{children:["The diagram syntax is ",(0,t.jsx)(n.a,{href:"https://vega.github.io/vega-lite/docs/spec.html",children:"Vega-Lite View JSON Specification"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Please note that the output is a non-interactive SVG element or image. The Vega-Lite library is not loaded in the result page, so any JavaScript functionality is not available."}),"\n",(0,t.jsxs)(n.p,{children:["Example: (",(0,t.jsx)(s,{id:"sui8eux6siv"}),")"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<div data-src="vega-lite.svg"></div>\n<script\n  type="application/diagram-vega-lite"\n  data-output="vega-lite.svg"\n  src="https://vega.github.io/vega-lite/examples/sequence_line_fold.vl.json"\n><\/script>\n'})}),"\n",(0,t.jsx)(n.h3,{id:"wavedrom",children:(0,t.jsx)(n.a,{href:"https://wavedrom.com/",children:"WaveDrom"})}),"\n",(0,t.jsxs)(n.p,{children:["The diagram syntax is ",(0,t.jsx)(n.a,{href:"https://wavedrom.com/tutorial.html",children:"WaveJSON"})," format."]}),"\n",(0,t.jsxs)(n.p,{children:["Example: (",(0,t.jsx)(s,{id:"ey74x6q6cq3"}),")"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'<div data-src="wavedrom.svg"></div>\n<script type="application/diagram-wavedrom" data-output="wavedrom.svg">\n  { signal : [\n    { name: "clk",  wave: "p......" },\n    { name: "bus",  wave: "x.34.5x",   data: "head body tail" },\n    { name: "wire", wave: "0.1..0." },\n  ]}\n<\/script>\n'})})]})}function g(e={}){let{wrapper:n}={...(0,l.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(o,{...e})}):o(e)}},71:function(e,n,a){a.d(n,{Z:function(){return i}});let i="data:image/svg+xml;base64,PHN2ZyBpZD0ibGl2ZWNvZGVzLW1lcm1haWQtY2hhcnQtMSIgd2lkdGg9IjEwMCUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGhlaWdodD0iMjMyLjQwMDAwOTE1NTI3MzQ0IiBzdHlsZT0ibWF4LXdpZHRoOiAxMjQuNjMxMjU2MTAzNTE1NjJweDsiIHZpZXdCb3g9IjkuNTM2NzQzMTY0MDYyNWUtNyAwIDEyNC42MzEyNTYxMDM1MTU2MiAyMzIuNDAwMDA5MTU1MjczNDQiPjxzdHlsZT4jbGl2ZWNvZGVzLW1lcm1haWQtY2hhcnQtMSB7Zm9udC1mYW1pbHk6InRyZWJ1Y2hldCBtcyIsdmVyZGFuYSxhcmlhbCxzYW5zLXNlcmlmO2ZvbnQtc2l6ZToxNnB4O2ZpbGw6IzMzMzt9I2xpdmVjb2Rlcy1tZXJtYWlkLWNoYXJ0LTEgLmVycm9yLWljb257ZmlsbDojNTUyMjIyO30jbGl2ZWNvZGVzLW1lcm1haWQtY2hhcnQtMSAuZXJyb3ItdGV4dHtmaWxsOiM1NTIyMjI7c3Ryb2tlOiM1NTIyMjI7fSNsaXZlY29kZXMtbWVybWFpZC1jaGFydC0xIC5lZGdlLXRoaWNrbmVzcy1ub3JtYWx7c3Ryb2tlLXdpZHRoOjJweDt9I2xpdmVjb2Rlcy1tZXJtYWlkLWNoYXJ0LTEgLmVkZ2UtdGhpY2tuZXNzLXRoaWNre3N0cm9rZS13aWR0aDozLjVweDt9I2xpdmVjb2Rlcy1tZXJtYWlkLWNoYXJ0LTEgLmVkZ2UtcGF0dGVybi1zb2xpZHtzdHJva2UtZGFzaGFycmF5OjA7fSNsaXZlY29kZXMtbWVybWFpZC1jaGFydC0xIC5lZGdlLXBhdHRlcm4tZGFzaGVke3N0cm9rZS1kYXNoYXJyYXk6Mzt9I2xpdmVjb2Rlcy1tZXJtYWlkLWNoYXJ0LTEgLmVkZ2UtcGF0dGVybi1kb3R0ZWR7c3Ryb2tlLWRhc2hhcnJheToyO30jbGl2ZWNvZGVzLW1lcm1haWQtY2hhcnQtMSAubWFya2Vye2ZpbGw6IzMzMzMzMztzdHJva2U6IzMzMzMzMzt9I2xpdmVjb2Rlcy1tZXJtYWlkLWNoYXJ0LTEgLm1hcmtlci5jcm9zc3tzdHJva2U6IzMzMzMzMzt9I2xpdmVjb2Rlcy1tZXJtYWlkLWNoYXJ0LTEgc3Zne2ZvbnQtZmFtaWx5OiJ0cmVidWNoZXQgbXMiLHZlcmRhbmEsYXJpYWwsc2Fucy1zZXJpZjtmb250LXNpemU6MTZweDt9I2xpdmVjb2Rlcy1tZXJtYWlkLWNoYXJ0LTEgLmxhYmVse2ZvbnQtZmFtaWx5OiJ0cmVidWNoZXQgbXMiLHZlcmRhbmEsYXJpYWwsc2Fucy1zZXJpZjtjb2xvcjojMzMzO30jbGl2ZWNvZGVzLW1lcm1haWQtY2hhcnQtMSAuY2x1c3Rlci1sYWJlbCB0ZXh0e2ZpbGw6IzMzMzt9I2xpdmVjb2Rlcy1tZXJtYWlkLWNoYXJ0LTEgLmNsdXN0ZXItbGFiZWwgc3Bhbntjb2xvcjojMzMzO30jbGl2ZWNvZGVzLW1lcm1haWQtY2hhcnQtMSAubGFiZWwgdGV4dCwjbGl2ZWNvZGVzLW1lcm1haWQtY2hhcnQtMSBzcGFue2ZpbGw6IzMzMztjb2xvcjojMzMzO30jbGl2ZWNvZGVzLW1lcm1haWQtY2hhcnQtMSAubm9kZSByZWN0LCNsaXZlY29kZXMtbWVybWFpZC1jaGFydC0xIC5ub2RlIGNpcmNsZSwjbGl2ZWNvZGVzLW1lcm1haWQtY2hhcnQtMSAubm9kZSBlbGxpcHNlLCNsaXZlY29kZXMtbWVybWFpZC1jaGFydC0xIC5ub2RlIHBvbHlnb24sI2xpdmVjb2Rlcy1tZXJtYWlkLWNoYXJ0LTEgLm5vZGUgcGF0aHtmaWxsOiNFQ0VDRkY7c3Ryb2tlOiM5MzcwREI7c3Ryb2tlLXdpZHRoOjFweDt9I2xpdmVjb2Rlcy1tZXJtYWlkLWNoYXJ0LTEgLm5vZGUgLmxhYmVse3RleHQtYWxpZ246Y2VudGVyO30jbGl2ZWNvZGVzLW1lcm1haWQtY2hhcnQtMSAubm9kZS5jbGlja2FibGV7Y3Vyc29yOnBvaW50ZXI7fSNsaXZlY29kZXMtbWVybWFpZC1jaGFydC0xIC5hcnJvd2hlYWRQYXRoe2ZpbGw6IzMzMzMzMzt9I2xpdmVjb2Rlcy1tZXJtYWlkLWNoYXJ0LTEgLmVkZ2VQYXRoIC5wYXRoe3N0cm9rZTojMzMzMzMzO3N0cm9rZS13aWR0aDoyLjBweDt9I2xpdmVjb2Rlcy1tZXJtYWlkLWNoYXJ0LTEgLmZsb3djaGFydC1saW5re3N0cm9rZTojMzMzMzMzO2ZpbGw6bm9uZTt9I2xpdmVjb2Rlcy1tZXJtYWlkLWNoYXJ0LTEgLmVkZ2VMYWJlbHtiYWNrZ3JvdW5kLWNvbG9yOiNlOGU4ZTg7dGV4dC1hbGlnbjpjZW50ZXI7fSNsaXZlY29kZXMtbWVybWFpZC1jaGFydC0xIC5lZGdlTGFiZWwgcmVjdHtvcGFjaXR5OjAuNTtiYWNrZ3JvdW5kLWNvbG9yOiNlOGU4ZTg7ZmlsbDojZThlOGU4O30jbGl2ZWNvZGVzLW1lcm1haWQtY2hhcnQtMSAuY2x1c3RlciByZWN0e2ZpbGw6I2ZmZmZkZTtzdHJva2U6I2FhYWEzMztzdHJva2Utd2lkdGg6MXB4O30jbGl2ZWNvZGVzLW1lcm1haWQtY2hhcnQtMSAuY2x1c3RlciB0ZXh0e2ZpbGw6IzMzMzt9I2xpdmVjb2Rlcy1tZXJtYWlkLWNoYXJ0LTEgLmNsdXN0ZXIgc3Bhbntjb2xvcjojMzMzO30jbGl2ZWNvZGVzLW1lcm1haWQtY2hhcnQtMSBkaXYubWVybWFpZFRvb2x0aXB7cG9zaXRpb246YWJzb2x1dGU7dGV4dC1hbGlnbjpjZW50ZXI7bWF4LXdpZHRoOjIwMHB4O3BhZGRpbmc6MnB4O2ZvbnQtZmFtaWx5OiJ0cmVidWNoZXQgbXMiLHZlcmRhbmEsYXJpYWwsc2Fucy1zZXJpZjtmb250LXNpemU6MTJweDtiYWNrZ3JvdW5kOmhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpO2JvcmRlcjoxcHggc29saWQgI2FhYWEzMztib3JkZXItcmFkaXVzOjJweDtwb2ludGVyLWV2ZW50czpub25lO3otaW5kZXg6MTAwO30jbGl2ZWNvZGVzLW1lcm1haWQtY2hhcnQtMSA6cm9vdHstLW1lcm1haWQtZm9udC1mYW1pbHk6InRyZWJ1Y2hldCBtcyIsdmVyZGFuYSxhcmlhbCxzYW5zLXNlcmlmO308L3N0eWxlPjxnPjxnIGNsYXNzPSJvdXRwdXQiPjxnIGNsYXNzPSJjbHVzdGVycyI+PC9nPjxnIGNsYXNzPSJlZGdlUGF0aHMiPjxnIGNsYXNzPSJlZGdlUGF0aCBMUy1BIExFLUIiIGlkPSJMLUEtQiIgc3R5bGU9Im9wYWNpdHk6IDE7Ij48cGF0aCBjbGFzcz0icGF0aCIgZD0iTTQ3LjQ2NzE4NzQwNDYzMjU3LDQzLjg3ODc4Mjc3OTE5MjU4TDQzLjMxMDY3Njk3MjA3MTMzLDQ4LjUzMjMxODg1NTUwMzkxQzM5LjE1NDE2NjUzOTUxMDA5LDUzLjE4NTg1NDkzMTgxNTI0LDMwLjg0MTE0NTY3NDM4NzYxNSw2Mi40OTI5MjcwODQ0Mzc4OTUsMjYuNjg0NjM1MjQxODI2Mzc0LDcxLjMxMzEyOTgyNzQxNTg5QzIyLjUyODEyNDgwOTI2NTEzNyw4MC4xMzMzMzI1NzAzOTM4OCwyMi41MjgxMjQ4MDkyNjUxMzcsODguNDY2NjY1OTAzNzI3MjIsMjIuNTI4MTI0ODA5MjY1MTM3LDkyLjYzMzMzMjU3MDM5Mzg4TDIyLjUyODEyNDgwOTI2NTEzNyw5Ni43OTk5OTkyMzcwNjA1NSIgbWFya2VyLWVuZD0idXJsKCNhcnJvd2hlYWQ3OTIpIiBzdHlsZT0iZmlsbDpub25lIj48L3BhdGg+PGRlZnM+PG1hcmtlciBpZD0iYXJyb3doZWFkNzkyIiB2aWV3Qm94PSIwIDAgMTAgMTAiIHJlZlg9IjkiIHJlZlk9IjUiIG1hcmtlclVuaXRzPSJzdHJva2VXaWR0aCIgbWFya2VyV2lkdGg9IjgiIG1hcmtlckhlaWdodD0iNiIgb3JpZW50PSJhdXRvIj48cGF0aCBkPSJNIDAgMCBMIDEwIDUgTCAwIDEwIHoiIGNsYXNzPSJhcnJvd2hlYWRQYXRoIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOiAxOyBzdHJva2UtZGFzaGFycmF5OiAxLCAwOyI+PC9wYXRoPjwvbWFya2VyPjwvZGVmcz48L2c+PGcgY2xhc3M9ImVkZ2VQYXRoIExTLUEgTEUtQyIgaWQ9IkwtQS1DIiBzdHlsZT0ib3BhY2l0eTogMTsiPjxwYXRoIGNsYXNzPSJwYXRoIiBkPSJNNzYuOTA0Njg3NDA0NjMyNTcsNDMuODc4NzgyNzc5MTkyNThMODEuMDYxMTk3ODM3MTkzOCw0OC41MzIzMTg4NTU1MDM5MUM4NS4yMTc3MDgyNjk3NTUwNSw1My4xODU4NTQ5MzE4MTUyNCw5My41MzA3MjkxMzQ4Nzc1Miw2Mi40OTI5MjcwODQ0Mzc4OTUsOTcuNjg3MjM5NTY3NDM4NzcsNzEuMzEzMTI5ODI3NDE1ODlDMTAxLjg0Mzc1LDgwLjEzMzMzMjU3MDM5Mzg4LDEwMS44NDM3NSw4OC40NjY2NjU5MDM3MjcyMiwxMDEuODQzNzUsOTIuNjMzMzMyNTcwMzkzODhMMTAxLjg0Mzc1LDk2Ljc5OTk5OTIzNzA2MDU1IiBtYXJrZXItZW5kPSJ1cmwoI2Fycm93aGVhZDc5MykiIHN0eWxlPSJmaWxsOm5vbmUiPjwvcGF0aD48ZGVmcz48bWFya2VyIGlkPSJhcnJvd2hlYWQ3OTMiIHZpZXdCb3g9IjAgMCAxMCAxMCIgcmVmWD0iOSIgcmVmWT0iNSIgbWFya2VyVW5pdHM9InN0cm9rZVdpZHRoIiBtYXJrZXJXaWR0aD0iOCIgbWFya2VySGVpZ2h0PSI2IiBvcmllbnQ9ImF1dG8iPjxwYXRoIGQ9Ik0gMCAwIEwgMTAgNSBMIDAgMTAgeiIgY2xhc3M9ImFycm93aGVhZFBhdGgiIHN0eWxlPSJzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDA7Ij48L3BhdGg+PC9tYXJrZXI+PC9kZWZzPjwvZz48ZyBjbGFzcz0iZWRnZVBhdGggTFMtQiBMRS1EIiBpZD0iTC1CLUQiIHN0eWxlPSJvcGFjaXR5OiAxOyI+PHBhdGggY2xhc3M9InBhdGgiIGQ9Ik0yMi41MjgxMjQ4MDkyNjUxMzcsMTM1LjU5OTk5ODQ3NDEyMTFMMjIuNTI4MTI0ODA5MjY1MTM3LDEzOS43NjY2NjUxNDA3ODc3NUMyMi41MjgxMjQ4MDkyNjUxMzcsMTQzLjkzMzMzMTgwNzQ1NDQ0LDIyLjUyODEyNDgwOTI2NTEzNywxNTIuMjY2NjY1MTQwNzg3NzUsMjYuNjUzMzg1MjQxODI2Mzc0LDE2MS4wNTE4ODEwODNDMzAuNzc4NjQ1Njc0Mzg3NjE1LDE2OS44MzcwOTcwMjUyMTIyNywzOS4wMjkxNjY1Mzk1MTAwOSwxNzkuMDc0MTk1NTc2MzAzNDIsNDMuMTU0NDI2OTcyMDcxMzMsMTgzLjY5Mjc0NDg1MTg0OTA2TDQ3LjI3OTY4NzQwNDYzMjU3LDE4OC4zMTEyOTQxMjczOTQ2MyIgbWFya2VyLWVuZD0idXJsKCNhcnJvd2hlYWQ3OTQpIiBzdHlsZT0iZmlsbDpub25lIj48L3BhdGg+PGRlZnM+PG1hcmtlciBpZD0iYXJyb3doZWFkNzk0IiB2aWV3Qm94PSIwIDAgMTAgMTAiIHJlZlg9IjkiIHJlZlk9IjUiIG1hcmtlclVuaXRzPSJzdHJva2VXaWR0aCIgbWFya2VyV2lkdGg9IjgiIG1hcmtlckhlaWdodD0iNiIgb3JpZW50PSJhdXRvIj48cGF0aCBkPSJNIDAgMCBMIDEwIDUgTCAwIDEwIHoiIGNsYXNzPSJhcnJvd2hlYWRQYXRoIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOiAxOyBzdHJva2UtZGFzaGFycmF5OiAxLCAwOyI+PC9wYXRoPjwvbWFya2VyPjwvZGVmcz48L2c+PGcgY2xhc3M9ImVkZ2VQYXRoIExTLUMgTEUtRCIgaWQ9IkwtQy1EIiBzdHlsZT0ib3BhY2l0eTogMTsiPjxwYXRoIGNsYXNzPSJwYXRoIiBkPSJNMTAxLjg0Mzc1LDEzNS41OTk5OTg0NzQxMjExTDEwMS44NDM3NSwxMzkuNzY2NjY1MTQwNzg3NzVDMTAxLjg0Mzc1LDE0My45MzMzMzE4MDc0NTQ0NCwxMDEuODQzNzUsMTUyLjI2NjY2NTE0MDc4Nzc1LDk3LjcxODQ4OTU2NzQzODc3LDE2MS4wNTE4ODEwODNDOTMuNTkzMjI5MTM0ODc3NTIsMTY5LjgzNzA5NzAyNTIxMjI3LDg1LjM0MjcwODI2OTc1NTA1LDE3OS4wNzQxOTU1NzYzMDM0Miw4MS4yMTc0NDc4MzcxOTM4LDE4My42OTI3NDQ4NTE4NDkwNkw3Ny4wOTIxODc0MDQ2MzI1NywxODguMzExMjk0MTI3Mzk0NjMiIG1hcmtlci1lbmQ9InVybCgjYXJyb3doZWFkNzk1KSIgc3R5bGU9ImZpbGw6bm9uZSI+PC9wYXRoPjxkZWZzPjxtYXJrZXIgaWQ9ImFycm93aGVhZDc5NSIgdmlld0JveD0iMCAwIDEwIDEwIiByZWZYPSI5IiByZWZZPSI1IiBtYXJrZXJVbml0cz0ic3Ryb2tlV2lkdGgiIG1hcmtlcldpZHRoPSI4IiBtYXJrZXJIZWlnaHQ9IjYiIG9yaWVudD0iYXV0byI+PHBhdGggZD0iTSAwIDAgTCAxMCA1IEwgMCAxMCB6IiBjbGFzcz0iYXJyb3doZWFkUGF0aCIgc3R5bGU9InN0cm9rZS13aWR0aDogMTsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMDsiPjwvcGF0aD48L21hcmtlcj48L2RlZnM+PC9nPjwvZz48ZyBjbGFzcz0iZWRnZUxhYmVscyI+PGcgY2xhc3M9ImVkZ2VMYWJlbCIgdHJhbnNmb3JtPSIiIHN0eWxlPSJvcGFjaXR5OiAxOyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIgY2xhc3M9ImxhYmVsIj48cmVjdCByeD0iMCIgcnk9IjAiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPjwvcmVjdD48Zm9yZWlnbk9iamVjdCB3aWR0aD0iMCIgaGVpZ2h0PSIwIj48ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iZGlzcGxheTogaW5saW5lLWJsb2NrOyB3aGl0ZS1zcGFjZTogbm93cmFwOyI+PHNwYW4gaWQ9IkwtTC1BLUIiIGNsYXNzPSJlZGdlTGFiZWwgTC1MUy1BJyBMLUxFLUIiPjwvc3Bhbj48L2Rpdj48L2ZvcmVpZ25PYmplY3Q+PC9nPjwvZz48ZyBjbGFzcz0iZWRnZUxhYmVsIiB0cmFuc2Zvcm09IiIgc3R5bGU9Im9wYWNpdHk6IDE7Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBjbGFzcz0ibGFiZWwiPjxyZWN0IHJ4PSIwIiByeT0iMCIgd2lkdGg9IjAiIGhlaWdodD0iMCI+PC9yZWN0Pjxmb3JlaWduT2JqZWN0IHdpZHRoPSIwIiBoZWlnaHQ9IjAiPjxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OiBpbmxpbmUtYmxvY2s7IHdoaXRlLXNwYWNlOiBub3dyYXA7Ij48c3BhbiBpZD0iTC1MLUEtQyIgY2xhc3M9ImVkZ2VMYWJlbCBMLUxTLUEnIEwtTEUtQyI+PC9zcGFuPjwvZGl2PjwvZm9yZWlnbk9iamVjdD48L2c+PC9nPjxnIGNsYXNzPSJlZGdlTGFiZWwiIHRyYW5zZm9ybT0iIiBzdHlsZT0ib3BhY2l0eTogMTsiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiIGNsYXNzPSJsYWJlbCI+PHJlY3Qgcng9IjAiIHJ5PSIwIiB3aWR0aD0iMCIgaGVpZ2h0PSIwIj48L3JlY3Q+PGZvcmVpZ25PYmplY3Qgd2lkdGg9IjAiIGhlaWdodD0iMCI+PGRpdiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9ImRpc3BsYXk6IGlubGluZS1ibG9jazsgd2hpdGUtc3BhY2U6IG5vd3JhcDsiPjxzcGFuIGlkPSJMLUwtQi1EIiBjbGFzcz0iZWRnZUxhYmVsIEwtTFMtQicgTC1MRS1EIj48L3NwYW4+PC9kaXY+PC9mb3JlaWduT2JqZWN0PjwvZz48L2c+PGcgY2xhc3M9ImVkZ2VMYWJlbCIgdHJhbnNmb3JtPSIiIHN0eWxlPSJvcGFjaXR5OiAxOyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIgY2xhc3M9ImxhYmVsIj48cmVjdCByeD0iMCIgcnk9IjAiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPjwvcmVjdD48Zm9yZWlnbk9iamVjdCB3aWR0aD0iMCIgaGVpZ2h0PSIwIj48ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iZGlzcGxheTogaW5saW5lLWJsb2NrOyB3aGl0ZS1zcGFjZTogbm93cmFwOyI+PHNwYW4gaWQ9IkwtTC1DLUQiIGNsYXNzPSJlZGdlTGFiZWwgTC1MUy1DJyBMLUxFLUQiPjwvc3Bhbj48L2Rpdj48L2ZvcmVpZ25PYmplY3Q+PC9nPjwvZz48L2c+PGcgY2xhc3M9Im5vZGVzIj48ZyBjbGFzcz0ibm9kZSBkZWZhdWx0IiBpZD0iZmxvd2NoYXJ0LUEtMjY0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2Mi4xODU5Mzc0MDQ2MzI1NywyNy4zOTk5OTk2MTg1MzAyNzMpIiBzdHlsZT0ib3BhY2l0eTogMTsiPjxyZWN0IHJ4PSIwIiByeT0iMCIgeD0iLTE0LjcxODc1IiB5PSItMTkuNDAwMDAwNTcyMjA0NTkiIHdpZHRoPSIyOS40Mzc1IiBoZWlnaHQ9IjM4LjgwMDAwMTE0NDQwOTE4IiBjbGFzcz0ibGFiZWwtY29udGFpbmVyIj48L3JlY3Q+PGcgY2xhc3M9ImxhYmVsIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNC43MTg3NSwtOS40MDAwMDA1NzIyMDQ1OSkiPjxmb3JlaWduT2JqZWN0IHdpZHRoPSI5LjQzNzUiIGhlaWdodD0iMTguODAwMDAxMTQ0NDA5MTgiPjxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OiBpbmxpbmUtYmxvY2s7IHdoaXRlLXNwYWNlOiBub3dyYXA7Ij5BPC9kaXY+PC9mb3JlaWduT2JqZWN0PjwvZz48L2c+PC9nPjxnIGNsYXNzPSJub2RlIGRlZmF1bHQiIGlkPSJmbG93Y2hhcnQtQi0yNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyLjUyODEyNDgwOTI2NTEzNywxMTYuMTk5OTk4ODU1NTkwODIpIiBzdHlsZT0ib3BhY2l0eTogMTsiPjxyZWN0IHJ4PSIwIiByeT0iMCIgeD0iLTE0LjUyODEyNTI4NjEwMjI5NSIgeT0iLTE5LjQwMDAwMDU3MjIwNDU5IiB3aWR0aD0iMjkuMDU2MjUwNTcyMjA0NTkiIGhlaWdodD0iMzguODAwMDAxMTQ0NDA5MTgiIGNsYXNzPSJsYWJlbC1jb250YWluZXIiPjwvcmVjdD48ZyBjbGFzcz0ibGFiZWwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00LjUyODEyNTI4NjEwMjI5NSwtOS40MDAwMDA1NzIyMDQ1OSkiPjxmb3JlaWduT2JqZWN0IHdpZHRoPSI5LjA1NjI1MDU3MjIwNDU5IiBoZWlnaHQ9IjE4LjgwMDAwMTE0NDQwOTE4Ij48ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iZGlzcGxheTogaW5saW5lLWJsb2NrOyB3aGl0ZS1zcGFjZTogbm93cmFwOyI+QjwvZGl2PjwvZm9yZWlnbk9iamVjdD48L2c+PC9nPjwvZz48ZyBjbGFzcz0ibm9kZSBkZWZhdWx0IiBpZD0iZmxvd2NoYXJ0LUMtMjY3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDEuODQzNzUsMTE2LjE5OTk5ODg1NTU5MDgyKSIgc3R5bGU9Im9wYWNpdHk6IDE7Ij48cmVjdCByeD0iMCIgcnk9IjAiIHg9Ii0xNC43ODc0OTk5MDQ2MzI1NjgiIHk9Ii0xOS40MDAwMDA1NzIyMDQ1OSIgd2lkdGg9IjI5LjU3NDk5OTgwOTI2NTEzNyIgaGVpZ2h0PSIzOC44MDAwMDExNDQ0MDkxOCIgY2xhc3M9ImxhYmVsLWNvbnRhaW5lciI+PC9yZWN0PjxnIGNsYXNzPSJsYWJlbCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQuNzg3NDk5OTA0NjMyNTY4LC05LjQwMDAwMDU3MjIwNDU5KSI+PGZvcmVpZ25PYmplY3Qgd2lkdGg9IjkuNTc0OTk5ODA5MjY1MTM3IiBoZWlnaHQ9IjE4LjgwMDAwMTE0NDQwOTE4Ij48ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iZGlzcGxheTogaW5saW5lLWJsb2NrOyB3aGl0ZS1zcGFjZTogbm93cmFwOyI+QzwvZGl2PjwvZm9yZWlnbk9iamVjdD48L2c+PC9nPjwvZz48ZyBjbGFzcz0ibm9kZSBkZWZhdWx0IiBpZD0iZmxvd2NoYXJ0LUQtMjY5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2Mi4xODU5Mzc0MDQ2MzI1NywyMDQuOTk5OTk4MDkyNjUxMzcpIiBzdHlsZT0ib3BhY2l0eTogMTsiPjxyZWN0IHJ4PSIwIiByeT0iMCIgeD0iLTE0LjkwNjI1IiB5PSItMTkuNDAwMDAwNTcyMjA0NTkiIHdpZHRoPSIyOS44MTI1IiBoZWlnaHQ9IjM4LjgwMDAwMTE0NDQwOTE4IiBjbGFzcz0ibGFiZWwtY29udGFpbmVyIj48L3JlY3Q+PGcgY2xhc3M9ImxhYmVsIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNC45MDYyNSwtOS40MDAwMDA1NzIyMDQ1OSkiPjxmb3JlaWduT2JqZWN0IHdpZHRoPSI5LjgxMjUiIGhlaWdodD0iMTguODAwMDAxMTQ0NDA5MTgiPjxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJkaXNwbGF5OiBpbmxpbmUtYmxvY2s7IHdoaXRlLXNwYWNlOiBub3dyYXA7Ij5EPC9kaXY+PC9mb3JlaWduT2JqZWN0PjwvZz48L2c+PC9nPjwvZz48L2c+PC9nPjwvc3ZnPg=="},65:function(e,n,a){a.d(n,{Z:function(){return d},a:function(){return s}});var i=a(7294);let t={},l=i.createContext(t);function s(e){let n=i.useContext(l);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:s(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]);