gitea/livecode-static
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
livecode-static/docs/languages/diagrams/index.html
yangxin 583644a855 更改origin打包
2025-06-12 09:37:26 +08:00

117 lines
286 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-languages/diagrams" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.7.0"><title data-rh=true>Diagrams | LiveCodes</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true property=og:url content=https://livecodes.io/docs/languages/diagrams><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true name=docusaurus_version content=current><meta data-rh=true name=docusaurus_tag content=docs-default-current><meta data-rh=true name=docsearch:version content=current><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-current><meta data-rh=true property=og:title content="Diagrams | LiveCodes"><meta data-rh=true name=description content=Overview><meta data-rh=true property=og:description content=Overview><link data-rh=true rel=icon href=/docs/img/favicon.ico><link data-rh=true rel=canonical href=https://livecodes.io/docs/languages/diagrams><link data-rh=true rel=alternate href=https://livecodes.io/docs/languages/diagrams hreflang=en><link data-rh=true rel=alternate href=https://livecodes.io/docs/languages/diagrams hreflang=x-default><link data-rh=true rel=preconnect href=https://H9Z2PKYS80-dsn.algolia.net crossorigin=anonymous><link rel=search type=application/opensearchdescription+xml title=LiveCodes href=/docs/opensearch.xml><script type=ea-placeholder id=ea-placeholder data-ea-publisher=livecodesio data-ea-manual=true></script><script src=https://unpkg.com/prettier@2.4.1/standalone.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-babel.js async></script><script src=https://unpkg.com/prettier@2.4.1/parser-html.js async></script><script src=https://media.ethicalads.io/media/client/ethicalads.min.js async defer></script><link rel=stylesheet href=/docs/assets/css/styles.61e3dfbf.css><script src=/docs/assets/js/runtime~main.a40c3f9c.js defer></script><script src=/docs/assets/js/main.af5c4c8b.js defer></script><body class=navigation-with-keyboard><script>!function(){var t,e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t=null!==e?e:"light",document.documentElement.setAttribute("data-theme",t)}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id=__docusaurus><link rel=preload as=image href=/docs/img/livecodes-logo.svg><div role=region aria-label="Skip to main content"><a class=skipToContent_fXgn href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="navbar navbar--fixed-top"><div class=navbar__inner><div class=navbar__items><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/docs/><div class=navbar__logo><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src=/docs/img/livecodes-logo.svg alt="LiveCodes Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">LiveCodes</b></a><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/docs/overview>Docs</a><a class="navbar__item navbar__link" href=/docs/sdk>SDK</a><a href=https://blog.livecodes.io target=_self rel="noopener noreferrer" class="navbar__item navbar__link">Blog<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=/docs/../stories target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">Storybook<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></div><div class="navbar__items navbar__items--right"><a href=/docs/../ target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">App<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://twitter.com/livecodes_io target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">𝕏<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><a href=https://github.com/live-codes/livecodes target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type=button disabled title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live=polite aria-pressed=false><svg viewBox="0 0 24 24" width=24 height=24 class=lightToggleIcon_pyhR><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 class=darkToggleIcon_wfgR><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg></button></div><div class=navbarSearchContainer_Bca1><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="main-wrapper mainWrapper_z2l0"><div class=docsWrapper_hBAB><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type=button></button><div class=docRoot_UBD9><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class=sidebarViewport_aRkj><div class=sidebar_njMd><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--active" href=/docs/overview>Docs</a></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/why>Why Another Playground?</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/getting-started>Getting Started</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/features/>Features</a><button aria-label="Expand sidebar category 'Features'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/configuration/>Configuration</a><button aria-label="Expand sidebar category 'Configuration'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/sdk/>SDK</a><button aria-label="Expand sidebar category 'SDK'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" tabindex=0 href=/docs/advanced/>Advanced</a><button aria-label="Expand sidebar category 'Advanced'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--active" tabindex=0 href=/docs/languages/>Languages</a><button aria-label="Collapse sidebar category 'Languages'" aria-expanded=true type=button class="clean-btn menu__caret"></button></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/art-template>art-template</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/asciidoc>AsciiDoc</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/assemblyscript>AssemblyScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/astro>Astro</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/autoprefixer>Autoprefixer</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/babel>Babel</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/bbcode>BBCode</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/blockly>Blockly</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/civet>Civet</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/clio>Clio</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/clojurescript>ClojureScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/coffeescript>CoffeeScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/commonlisp>Common Lisp</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/cpp-wasm>C/C++ (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/cpp>C++</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/csharp-wasm>C# (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/css>CSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/cssmodules>CSS Modules</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/cssnano>cssnano</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/languages/diagrams>Diagrams</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/dot>doT</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/ejs>EJS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/eta>Eta</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/fennel>Fennel</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/flow>Flow</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/gleam>Gleam</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/go>Go (Golang)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/haml>Haml</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/handlebars>Handlebars</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/html>HTML</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/imba>Imba</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/java>Java</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/javascript>JavaScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/jinja>Jinja</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/jsx>JSX</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/julia>Julia</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/less>Less</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/lightningcss>Lightning CSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/liquid>Liquid</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/livescript>LiveScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/lua-wasm>Lua (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/lua>Lua</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/malina>Malina.js</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/markdown>Markdown</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/mdx>MDX</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/mjml>MJML</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/mustache>Mustache</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/nunjucks>Nunjucks</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/ocaml>OCaml</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/perl>Perl</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/php-wasm>PHP (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/php>PHP</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/postcss>PostCSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/postcssImportUrl>Import Url</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/postcssPresetEnv>Preset Env</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/postgresql>PostgreSQL</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/prolog>Prolog</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/pug>Pug</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/purgecss>PurgeCSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/python-wasm>Python (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/python>Python</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/r>R</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/react-native-tsx>React Native (TSX)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/react-native>React Native</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/react-tsx>React (TSX)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/react>React</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/reason>Reason</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/rescript>ReScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/richtext>Rich Text Editor</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/riot>Riot.js</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/ruby-wasm>Ruby (Wasm)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/ruby>Ruby</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/sass>Sass</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/scheme>Scheme</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/scss>SCSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/solid>Solid</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/solid.tsx>Solid (TS)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/sql>SQL (SQLite)</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/stencil>Stencil</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/stylis>Stylis</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/stylus>Stylus</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/sucrase>Sucrase</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/svelte>Svelte</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/tailwindcss>Tailwind CSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/tcl>Tcl</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/teal>Teal</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/tokencss>Token CSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/tsx>TSX</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/twig>Twig</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/typescript>TypeScript</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/unocss>UnoCSS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/vento>Vento</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/vue>Vue SFC</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/vue2>Vue 2 SFC</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/wat>WebAssembly Text</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/languages/windicss>Windi CSS</a></ul><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/bookmarklet>Bookmarklet</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/gh-action>GitHub Action ⚡</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/markdown-to-livecodes>Markdown to LiveCodes</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/contribution>Contribution</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/credits>Credits</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/license>License</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sponsor>Sponsor</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/contact>Contact</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/about>About us</a></ul></ul></nav><button type=button title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width=20 height=20 aria-hidden=true class=collapseSidebarButtonIcon_kv0_><g fill=#7a7a7a><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"/><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"/></g></svg></button></div></div></aside><main class=docMainContainer_TBSr><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_z5aJ"><div class=docItemContainer_c0TR><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label=Breadcrumbs><ul class=breadcrumbs itemscope itemtype=https://schema.org/BreadcrumbList><li class=breadcrumbs__item><a aria-label="Home page" class=breadcrumbs__link href=/docs/><svg viewBox="0 0 24 24" class=breadcrumbHomeIcon_YNFT><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill=currentColor /></svg></a><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class=breadcrumbs__item><a class=breadcrumbs__link itemprop=item href=/docs/overview><span itemprop=name>Docs</span></a><meta itemprop=position content=1><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class=breadcrumbs__item><a class=breadcrumbs__link itemprop=item href=/docs/languages/><span itemprop=name>Languages</span></a><meta itemprop=position content=2><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class="breadcrumbs__item breadcrumbs__item--active"><span class=breadcrumbs__link itemprop=name>Diagrams</span><meta itemprop=position content=3></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type=button class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Diagrams</h1><div class="custom-content custom-content-header content_lMOZ undefined"><div data-ea-publisher=livecodesio data-ea-type=image class=horizontal data-ea-manual=true></div></div></header>
<!-- -->
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=overview>Overview<a href=#overview class=hash-link aria-label="Direct link to Overview" title="Direct link to Overview">​</a></h2>
<p>Diagrams-as-code.</p>
<p>Allows using syntax for multiple visualization libraries inside HTML to produce diagrams.
The rendered diagrams are added to the <a href=/docs/features/result>result page</a> as either:</p>
<ul>
<li>SVG elements (which you can style with CSS or manipulate with JavaScript)</li>
<li>HTML images (which you can right-click and save or open in a new window)</li>
</ul>
<p>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).</p>
<a href="/?template=diagrams" target=_blank>Open starter template in LiveCodes</a>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=usage>Usage<a href=#usage class=hash-link aria-label="Direct link to Usage" title="Direct link to Usage">​</a></h2>
<p>This code: (<a href="/?x=id/2m8u9hgeiq4" target=_blank>open in LiveCodes</a>)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>my-diagram</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-mermaid</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-output</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>my-diagram</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> graph </span><span class="token script language-javascript constant" style=color:#36acaa>TD</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript constant" style=color:#36acaa>A</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript constant" style=color:#36acaa>B</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript constant" style=color:#36acaa>A</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript constant" style=color:#36acaa>C</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript constant" style=color:#36acaa>B</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript constant" style=color:#36acaa>D</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript constant" style=color:#36acaa>C</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript constant" style=color:#36acaa>D</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<p>produces this output:</p>
<p><img decoding=async loading=lazy alt=flow-chart src="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==" width=125 height=232 class=img_ev3q></p>
<h3>Steps</h3>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=1-add-a-diagram-target>1. Add a diagram target:<a href=#1-add-a-diagram-target class=hash-link aria-label="Direct link to 1. Add a diagram target:" title="Direct link to 1. Add a diagram target:">​</a></h4>
<p>The target element should have a <code>data-src</code> attribute.</p>
<p>It can be an HTML element (the SVG of the diagram will be embedded as a child element)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>my-diagram</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<p>becomes</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>my-diagram</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>svg</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>...</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain">...</span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>svg</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<p>or an HTML image element (the diagram will be added to its <code>src</code> attribute as a <a href=https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs target=_blank rel="noopener noreferrer">data URL</a>)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>img</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>my-diagram</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<p>becomes</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>img</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>my-diagram</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>data:image/svg+xml;base64,...</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<p>There can be more that one target element for the same diagram if they have the same <code>data-src</code> attribute.</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>my-diagram</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>img</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>my-diagram</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag punctuation" style=color:#393A34>/></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id=2-add-a-script-element-with-the-diagram-syntax>2. Add a script element with the diagram syntax:<a href=#2-add-a-script-element-with-the-diagram-syntax class=hash-link aria-label="Direct link to 2. Add a script element with the diagram syntax:" title="Direct link to 2. Add a script element with the diagram syntax:">​</a></h4>
<p>It should have:</p>
<ul>
<li>an attribute <code>type="application/diagram-{diagram type}"</code> that specifies the diagram type (e.g. <code>type="application/diagram-mermaid"</code>).</li>
<li>a <code>data-output</code> attribute that matches the <code>data-src</code> attribute of the target element.</li>
<li>the syntax of the diagram is the content of the script element or the content of a file linked by the <code>src</code> attribute.</li>
</ul>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-mermaid</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-output</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>my-diagram</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> graph </span><span class="token script language-javascript constant" style=color:#36acaa>TD</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript constant" style=color:#36acaa>A</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript constant" style=color:#36acaa>B</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript constant" style=color:#36acaa>A</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript constant" style=color:#36acaa>C</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript constant" style=color:#36acaa>B</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript constant" style=color:#36acaa>D</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript constant" style=color:#36acaa>C</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript constant" style=color:#36acaa>D</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-mermaid</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-output</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>second-diagram</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>/url/to/diagram/syntax</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f></span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id=supported-libraries>Supported Libraries<a href=#supported-libraries class=hash-link aria-label="Direct link to Supported Libraries" title="Direct link to Supported Libraries">​</a></h2>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=cytoscape><a href=https://js.cytoscape.org/ target=_blank rel="noopener noreferrer">Cytoscape</a><a href=#cytoscape class=hash-link aria-label="Direct link to cytoscape" title="Direct link to cytoscape">​</a></h3>
<p>The diagram syntax is JSON representing <a href=https://js.cytoscape.org/#getting-started/specifying-basic-options target=_blank rel="noopener noreferrer">Cytoscape options</a>.</p>
<p>Please note that reference to JavaScript objects cannot be used.<br> e.g. do not use <code>{container: document.getElementById('cy')}</code>.</p>
<p>Example: (<a href="/?x=id/nq6954cuvgs" target=_blank>open in LiveCodes</a>)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>cytoscape.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-cytoscape</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-output</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>cytoscape.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"elements"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"data"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"a"</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"data"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"b"</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"data"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"ab"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"source"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"a"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"target"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"b"</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"style"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"selector"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"node"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"style"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"background-color"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"#666"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"label"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"data(id)"</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"selector"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"edge"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"style"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"width"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>3</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"line-color"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"#ccc"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"target-arrow-color"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"#ccc"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"target-arrow-shape"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"triangle"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"curve-style"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"bezier"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"layout"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"name"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"grid"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"rows"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>1</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=elk><a href=https://www.eclipse.org/elk/ target=_blank rel="noopener noreferrer">ELK</a><a href=#elk class=hash-link aria-label="Direct link to elk" title="Direct link to elk">​</a></h3>
<p>Diagram layout is produced using <a href=https://github.com/kieler/elkjs target=_blank rel="noopener noreferrer">elkjs</a> and rendered using <a href=https://github.com/EmilStenstrom/elkjs-svg target=_blank rel="noopener noreferrer">elkjs-svg</a>.</p>
<p>The syntax used is <a href=https://www.eclipse.org/elk/documentation/tooldevelopers/graphdatastructure/jsonformat.html target=_blank rel="noopener noreferrer">ELK JSON</a> format. <br>ELK text format is not supported! (You may use <a href=https://rtsys.informatik.uni-kiel.de/elklive/conversion.html target=_blank rel="noopener noreferrer">this tool</a> to convert formats)</p>
<p>Example: (<a href="/?x=id/49cbr5k3z69" target=_blank>open in LiveCodes</a>)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>elk.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-elk</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-output</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>elk.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"root"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"layoutOptions"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"elk.algorithm"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"layered"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"children"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"n1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"width"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>70</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"height"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>70</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"n2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"width"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>70</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"height"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>70</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"n3"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"width"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>70</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"height"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>70</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"n4"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"width"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>70</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"height"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>70</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"n5"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"width"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>70</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"height"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>70</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"n6"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"width"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>70</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"height"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>70</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"edges"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"e1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"sources"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript string" style=color:#e3116c>"n1"</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"targets"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript string" style=color:#e3116c>"n2"</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"e2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"sources"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript string" style=color:#e3116c>"n1"</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"targets"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript string" style=color:#e3116c>"n3"</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"e3"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"sources"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript string" style=color:#e3116c>"n2"</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"targets"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript string" style=color:#e3116c>"n4"</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"e4"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"sources"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript string" style=color:#e3116c>"n3"</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"targets"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript string" style=color:#e3116c>"n5"</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"e5"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"sources"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript string" style=color:#e3116c>"n5"</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"targets"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript string" style=color:#e3116c>"n6"</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript string-property property" style=color:#36acaa>"id"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"e6"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"sources"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript string" style=color:#e3116c>"n4"</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"targets"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript string" style=color:#e3116c>"n6"</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=gnuplot><a href=http://www.gnuplot.info/ target=_blank rel="noopener noreferrer">Gnuplot</a><a href=#gnuplot class=hash-link aria-label="Direct link to gnuplot" title="Direct link to gnuplot">​</a></h3>
<p>using <a href=https://github.com/chhu/gnuplot-JS target=_blank rel="noopener noreferrer">gnuplot-JS</a></p>
<p>Instead of using <code>data-output</code> attribute in the <a href=#2-add-a-script-element-with-the-diagram-syntax>script element</a>, the statement <code>set output</code> is used in the diagram syntax (see highlighted lines below).</p>
<p>Data files are also specified in the diagram syntax (see highlighted lines below).
They are defined in script elements with the attribute <code>type="application/diagram-gnuplot-file"</code>. The file name is specified in <code>data-file</code> attribute and either have inline content or linked to with a <code>src</code> attribute.</p>
<p>Example: (<a href="/?x=id/45tardc2qaz" target=_blank>open in LiveCodes</a>)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>contour.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-gnuplot</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> terminal svg size </span><span class="token script language-javascript number" style=color:#36acaa>600</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript number" style=color:#36acaa>400</span><span class="token script language-javascript"> enhanced fname </span><span class="token script language-javascript string" style=color:#e3116c>'arial'</span><span class="token script language-javascript"> fsize </span><span class="token script language-javascript number" style=color:#36acaa>10</span><span class="token script language-javascript"> butt solid</span><br></span><span class="token-line theme-code-block-highlighted-line" style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> output </span><span class="token script language-javascript string" style=color:#e3116c>'contour.svg'</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> view </span><span class="token script language-javascript number" style=color:#36acaa>60</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>30</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.85</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>1.1</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> samples </span><span class="token script language-javascript number" style=color:#36acaa>25</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>25</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> isosamples </span><span class="token script language-javascript number" style=color:#36acaa>26</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>26</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> contour base</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> cntrparam bspline</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> cntrparam levels auto </span><span class="token script language-javascript number" style=color:#36acaa>10</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> style data lines</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> title </span><span class="token script language-javascript string" style=color:#e3116c>"3D gnuplot demo - contour of data grid plotting"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> xlabel </span><span class="token script language-javascript string" style=color:#e3116c>"X axis"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> xrange </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.00000</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>15.0000</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"> noreverse nowriteback</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> ylabel </span><span class="token script language-javascript string" style=color:#e3116c>"Y axis"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> yrange </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.00000</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>15.0000</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"> noreverse nowriteback</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> zlabel </span><span class="token script language-javascript string" style=color:#e3116c>"Z axis"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> zlabel offset character </span><span class="token script language-javascript number" style=color:#36acaa>1</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0</span><span class="token script language-javascript"> font </span><span class="token script language-javascript string" style=color:#e3116c>""</span><span class="token script language-javascript"> textcolor lt </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript number" style=color:#36acaa>1</span><span class="token script language-javascript"> norotate</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style=color:#00009f>set</span><span class="token script language-javascript"> zrange </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript number" style=color:#36acaa>1.20000</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>1.20000</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"> noreverse nowriteback</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> # </span><span class="token script language-javascript string" style=color:#e3116c>"glass.dat"</span><span class="token script language-javascript"> is defined below</span><br></span><span class="token-line theme-code-block-highlighted-line" style=color:#393A34><span class="token script language-javascript"> splot </span><span class="token script language-javascript string" style=color:#e3116c>"glass.dat"</span><span class="token script language-javascript"> using </span><span class="token script language-javascript number" style=color:#36acaa>1</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token comment" style=color:#999988;font-style:italic>&lt;!-- data file --></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-gnuplot-file</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-file</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>glass.dat</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>https://raw.githubusercontent.com/gnuplot/gnuplot/master/demo/glass.dat</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f></span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token comment" style=color:#999988;font-style:italic>&lt;!-- or inline data in a script block --></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-gnuplot-file</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-file</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>another-file.dat</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.568000</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.000000</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript number" style=color:#36acaa>0.911000</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.518894</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.231026</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript number" style=color:#36acaa>0.911000</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.380066</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.422106</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript number" style=color:#36acaa>0.911000</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.175522</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.540200</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript number" style=color:#36acaa>0.911000</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript number" style=color:#36acaa>0.059372</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.564888</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript number" style=color:#36acaa>0.911000</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=graphviz><a href=https://graphviz.org/ target=_blank rel="noopener noreferrer">Graphviz</a><a href=#graphviz class=hash-link aria-label="Direct link to graphviz" title="Direct link to graphviz">​</a></h3>
<p>using <a href=https://github.com/hpcc-systems/hpcc-js-wasm target=_blank rel="noopener noreferrer">@hpcc-js/wasm</a></p>
<p>The following <a href=https://graphviz.org/docs/layouts/ target=_blank rel="noopener noreferrer">layout engines</a> are supported:</p>
<ul>
<li>dot</li>
<li>neato</li>
<li>fdp</li>
<li>sfdp</li>
<li>circo</li>
<li>twopi</li>
<li>osage</li>
<li>patchwork</li>
</ul>
<p>By default, the <code>dot</code> layout engine is used. To use a different engine add the attribute <code>data-layout</code> to the <a href=#2-add-a-script-element-with-the-diagram-syntax>script element</a> with the value of the required engine name, like this:</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-graphviz</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-layout</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>fdp</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-output</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>my-diagram</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript spread operator" style=color:#393A34>...</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<p>Example: (<a href="/?x=id/ms2c6jc4vnj" target=_blank>open in LiveCodes</a>)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>flow-chart.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-graphviz</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-output</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>flow-chart.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> digraph </span><span class="token script language-javascript constant" style=color:#36acaa>G</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> node </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">shape</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">rect</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> subgraph cluster_0 </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> style</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">filled</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> color</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">lightgrey</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> node </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">style</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">filled</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript">color</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">white</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> a0 </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> a1 </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> a2 </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> a3</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> label </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"Hello"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> subgraph cluster_1 </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> node </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">style</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">filled</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> b0 </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> b1 </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> b2 </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> b3</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> label </span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"World!"</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> color</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript">blue</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> start </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> a0</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> start </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> b0</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> a1 </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> b3</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> b2 </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> a3</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> a3 </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> a0</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> a3 </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> end</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> b3 </span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> end</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> start </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">shape</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript maybe-class-name">Mdiamond</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> end </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">shape</span><span class="token script language-javascript operator" style=color:#393A34>=</span><span class="token script language-javascript maybe-class-name">Msquare</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=mermaid><a href=https://mermaid-js.github.io/mermaid/ target=_blank rel="noopener noreferrer">Mermaid</a><a href=#mermaid class=hash-link aria-label="Direct link to mermaid" title="Direct link to mermaid">​</a></h3>
<p>Example: (<a href="/?x=id/r9y3ubytquj" target=_blank>open in LiveCodes</a>)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>class-diagram.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-mermaid</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-output</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>class-diagram.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> classDiagram</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Class01</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">AveryLongClass</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Cool</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Class03</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Class04</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Class05</span><span class="token script language-javascript"> o</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Class06</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Class07</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript punctuation" style=color:#393A34>.</span><span class="token script language-javascript"> </span><span class="token script language-javascript property-access maybe-class-name">Class08</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Class09</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> </span><span class="token script language-javascript constant" style=color:#36acaa>C2</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Where</span><span class="token script language-javascript"> am i</span><span class="token script language-javascript operator" style=color:#393A34>?</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Class09</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript"> </span><span class="token script language-javascript constant" style=color:#36acaa>C3</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Class09</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Class07</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>Class07</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>equals</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>Class07</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript known-class-name class-name">Object</span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"> elementData</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>Class01</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style=color:#d73a49>size</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>Class01</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> int chimp</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>Class01</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> int gorilla</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Class08</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> </span><span class="token script language-javascript constant" style=color:#36acaa>C2</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Cool</span><span class="token script language-javascript"> label</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=nomnoml><a href=https://nomnoml.com/ target=_blank rel="noopener noreferrer">Nomnoml</a><a href=#nomnoml class=hash-link aria-label="Direct link to nomnoml" title="Direct link to nomnoml">​</a></h3>
<p>Example: (<a href="/?x=id/8x45vzfnxw5" target=_blank>open in LiveCodes</a>)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>nomnoml.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-nomnoml</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-output</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>nomnoml.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript maybe-class-name">Pirate</span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript">eyeCount</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Int</span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript function" style=color:#d73a49>raid</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>;</span><span class="token script language-javascript function" style=color:#d73a49>pillage</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">beard</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">parrot</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">beard</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">foul mouth</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript">table</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript">mischief </span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript"> bawl </span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript"> sing </span><span class="token script language-javascript operator" style=color:#393A34>||</span><span class="token script language-javascript"> yell </span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript"> drink</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript">abstract</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript maybe-class-name">Marauder</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript maybe-class-name">Pirate</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript maybe-class-name">Pirate</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.</span><span class="token script language-javascript number" style=color:#36acaa>.7</span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">mischief</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">jollyness</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript maybe-class-name">Pirate</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">jollyness</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">rum</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">jollyness</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">singing</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript maybe-class-name">Pirate</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">rum</span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript">tastiness</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Int</span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript function" style=color:#d73a49>swig</span><span class="token script language-javascript punctuation" style=color:#393A34>(</span><span class="token script language-javascript punctuation" style=color:#393A34>)</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript maybe-class-name">Pirate</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">singing</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">singing</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript operator" style=color:#393A34>&lt;</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript">rum</span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=pintora><a href=https://pintorajs.vercel.app/ target=_blank rel="noopener noreferrer">Pintora</a><a href=#pintora class=hash-link aria-label="Direct link to pintora" title="Direct link to pintora">​</a></h3>
<p><a href=https://pintorajs.vercel.app/docs/configuration/config target=_blank rel="noopener noreferrer">Pintora config</a> object can be specified in <a href=/docs/advanced/custom-settings>custom settings</a>, under the key <code>pintora</code>.</p>
<p>Example Custom Settings:</p>
<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-json codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"pintora"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"themeConfig"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token property" style=color:#36acaa>"theme"</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"dark"</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<p>Example: (<a href="/?x=id/9ygd8w4jfai" target=_blank>open in LiveCodes</a>)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>pintora.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-pintora</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-output</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>pintora.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> sequenceDiagram</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Frida</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>>></span><span class="token script language-javascript maybe-class-name">Georgia</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Flowers</span><span class="token script language-javascript"> are beautiful</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> @note over </span><span class="token script language-javascript maybe-class-name">Frida</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript literal-property property" style=color:#36acaa>Georgia</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Painters</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> @note right </span><span class="token script language-javascript keyword" style=color:#00009f>of</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>Georgia</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Right</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> @note left </span><span class="token script language-javascript keyword" style=color:#00009f>of</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Georgia</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> multiline</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> note</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> @end_note</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=plotly><a href=https://plotly.com/graphing-libraries/ target=_blank rel="noopener noreferrer">Plotly</a><a href=#plotly class=hash-link aria-label="Direct link to plotly" title="Direct link to plotly">​</a></h3>
<p>The diagram syntax is a JSON object with <code>data</code> and <code>layout</code> properties (see <a href=https://plotly.com/javascript/reference/index/ target=_blank rel="noopener noreferrer">Plotly reference</a>).</p>
<p>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.</p>
<p>Example: (<a href="/?x=id/c9teuatsfk6" target=_blank>open in LiveCodes</a>)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>plotly.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-plotly</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-output</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>plotly.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"data"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"y"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.2</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.2</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.6</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>1</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.5</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.4</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.2</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.7</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.9</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.1</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.5</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.3</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"x"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"name"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"kale"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"marker"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"color"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"#3D9970"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"type"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"box"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"y"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.6</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.7</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.3</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.6</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.5</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.7</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.9</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.5</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.8</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.7</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.2</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"x"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"name"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"radishes"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"marker"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"color"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"#FF4136"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"type"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"box"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"y"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.1</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.3</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.1</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.9</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.6</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.6</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.9</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>1</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.3</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.6</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.8</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0.5</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"x"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 1"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"day 2"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"name"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"carrots"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"marker"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"color"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"#FF851B"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"type"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"box"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"layout"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"yaxis"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"title"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"normalized moisture"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"zeroline"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript boolean" style=color:#36acaa>false</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript string-property property" style=color:#36acaa>"boxmode"</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"group"</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=svgbob><a href=https://github.com/ivanceras/svgbob target=_blank rel="noopener noreferrer">Svgbob</a><a href=#svgbob class=hash-link aria-label="Direct link to svgbob" title="Direct link to svgbob">​</a></h3>
<p>Example: (<a href="/?x=id/fqe7devefsm" target=_blank>open in LiveCodes</a>)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>svgbob.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-svgbob</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-output</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>svgbob.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> o</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Graphics</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Diagram</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript" style=display:inline-block></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>0</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>3</span><span class="token script language-javascript"> </span><span class="token script language-javascript constant" style=color:#36acaa>P</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>+</span><span class="token script language-javascript">y \</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>1</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>2</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>^</span><span class="token script language-javascript"> \</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>+</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript"> v0 \ v3</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript number" style=color:#36acaa>4</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript number" style=color:#36acaa>7</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript"> ◄╮ </span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript">\</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript"> ⤹ </span><span class="token script language-javascript operator" style=color:#393A34>+</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>></span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>+</span><span class="token script language-javascript">x </span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript"> v </span><span class="token script language-javascript constant" style=color:#36acaa>X</span><span class="token script language-javascript"> \</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>|</span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript"> ⤴ </span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript"> o \</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>-</span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript"> v </span><span class="token script language-javascript operator" style=color:#393A34>/</span><span class="token script language-javascript"> \</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>5</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style=color:#36acaa>6</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>+</span><span class="token script language-javascript">z v1 </span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>--</span><span class="token script language-javascript operator" style=color:#393A34>*</span><span class="token script language-javascript"> v2</span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=vega><a href=https://vega.github.io/vega/ target=_blank rel="noopener noreferrer">Vega</a><a href=#vega class=hash-link aria-label="Direct link to vega" title="Direct link to vega">​</a></h3>
<p>The diagram syntax is <a href=https://vega.github.io/vega/docs/#specification target=_blank rel="noopener noreferrer">Vega JSON specification</a>.</p>
<p>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.</p>
<p>Example: (<a href="/?x=id/m8ynr8vj7b2" target=_blank>open in LiveCodes</a>)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>vega.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-vega</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-output</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>vega.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>https://vega.github.io/vega/examples/stacked-bar-chart.vg.json</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f></span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=vegalite><a href=https://vega.github.io/vega-lite/ target=_blank rel="noopener noreferrer">VegaLite</a><a href=#vegalite class=hash-link aria-label="Direct link to vegalite" title="Direct link to vegalite">​</a></h3>
<p>The diagram syntax is <a href=https://vega.github.io/vega-lite/docs/spec.html target=_blank rel="noopener noreferrer">Vega-Lite View JSON Specification</a>.</p>
<p>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.</p>
<p>Example: (<a href="/?x=id/sui8eux6siv" target=_blank>open in LiveCodes</a>)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>vega-lite.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-vega-lite</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-output</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>vega-lite.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>https://vega.github.io/vega-lite/examples/sequence_line_fold.vl.json</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f></span><br></span><span class=token-line style=color:#393A34><span class="token tag" style=color:#00009f></span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id=wavedrom><a href=https://wavedrom.com/ target=_blank rel="noopener noreferrer">WaveDrom</a><a href=#wavedrom class=hash-link aria-label="Direct link to wavedrom" title="Direct link to wavedrom">​</a></h3>
<p>The diagram syntax is <a href=https://wavedrom.com/tutorial.html target=_blank rel="noopener noreferrer">WaveJSON</a> format.</p>
<p>Example: (<a href="/?x=id/ey74x6q6cq3" target=_blank>open in LiveCodes</a>)</p>
<div class="language-html codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_biex><pre tabindex=0 class="prism-code language-html codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><span class=token-line style=color:#393A34><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>div</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-src</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>wavedrom.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>div</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain"></span><br></span><span class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>script</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>type</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>application/diagram-wavedrom</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>data-output</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>wavedrom.svg</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>signal</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>[</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>name</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"clk"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>wave</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"p......"</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>name</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"bus"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>wave</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"x.34.5x"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>data</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"head body tail"</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>{</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>name</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"wire"</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style=color:#36acaa>wave</span><span class="token script language-javascript operator" style=color:#393A34>:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style=color:#e3116c>"0.1..0."</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript punctuation" style=color:#393A34>,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style=color:#393A34>]</span><span class="token script language-javascript punctuation" style=color:#393A34>}</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#393A34><span class="token script language-javascript"></span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>script</span><span class="token tag punctuation" style=color:#393A34>></span><br></span></code></pre><div class=buttonGroup__atx><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_eSgA aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_y97N><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_LjdS><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class=col><a href=https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/diagrams.mdx target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_Z9Sw aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/languages/cssnano><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>cssnano</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/languages/dot><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>doT</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#overview class="table-of-contents__link toc-highlight">Overview</a><li><a href=#usage class="table-of-contents__link toc-highlight">Usage</a><li><a href=#supported-libraries class="table-of-contents__link toc-highlight">Supported Libraries</a><ul><li><a href=#cytoscape class="table-of-contents__link toc-highlight">Cytoscape</a><li><a href=#elk class="table-of-contents__link toc-highlight">ELK</a><li><a href=#gnuplot class="table-of-contents__link toc-highlight">Gnuplot</a><li><a href=#graphviz class="table-of-contents__link toc-highlight">Graphviz</a><li><a href=#mermaid class="table-of-contents__link toc-highlight">Mermaid</a><li><a href=#nomnoml class="table-of-contents__link toc-highlight">Nomnoml</a><li><a href=#pintora class="table-of-contents__link toc-highlight">Pintora</a><li><a href=#plotly class="table-of-contents__link toc-highlight">Plotly</a><li><a href=#svgbob class="table-of-contents__link toc-highlight">Svgbob</a><li><a href=#vega class="table-of-contents__link toc-highlight">Vega</a><li><a href=#vegalite class="table-of-contents__link toc-highlight">VegaLite</a><li><a href=#wavedrom class="table-of-contents__link toc-highlight">WaveDrom</a></ul></ul><div class="custom-content custom-content-toc content_kfNa">
<div class=sponsors>
<div class=sponsors-title>Sponsors</div>
<ul>
<li><a href=https://livecodes.io/docs/sponsor title="Become a sponsor">Your Logo</a></li>
</ul>
</div>
</div></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class=footer__title>Docs</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/overview>Overview</a><li class=footer__item><a class=footer__link-item href=/docs/why>Why Another Playground?</a><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Getting Started</a><li class=footer__item><a class=footer__link-item href=/docs/features>Features</a><li class=footer__item><a class=footer__link-item href=/docs/languages>Languages</a><li class=footer__item><a class=footer__link-item href=/docs/sdk>SDK</a></ul></div><div class="col footer__col"><div class=footer__title>LiveCodes</div><ul class="footer__items clean-list"><li class=footer__item><a href=/docs/../ target=_blank rel="noopener noreferrer" class=footer__link-item>App<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=/docs/../?new target=_blank rel="noopener noreferrer" class=footer__link-item>Starter Templates<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href="/docs/../?screen=import" target=_blank rel="noopener noreferrer" class=footer__link-item>Import...<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a class=footer__link-item href=/docs/features/ai>AI Code Assistant 🪄</a><li class=footer__item><a class=footer__link-item href=/docs/bookmarklet>Bookmarklet</a><li class=footer__item><span style="display: flex; gap: 0.5em; align-items: baseline;"><a href=/docs/llms.txt target=_blank class=footer__link-item>llms.txt</a>-<a href=/docs/llms-full.txt target=_blank class=footer__link-item>llms-full.txt</a></span></ul></div><div class="col footer__col"><div class=footer__title>Info</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/credits>Credits</a><li class=footer__item><a class=footer__link-item href=/docs/license>License</a><li class=footer__item><a class=footer__link-item href=/docs/sponsor>Sponsor 💚</a><li class=footer__item><a class=footer__link-item href=/docs/contact>Contact</a><li class=footer__item><a class=footer__link-item href=/docs/about>About us</a></ul></div><div class="col footer__col"><div class=footer__title>More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://blog.livecodes.io target=_self rel="noopener noreferrer" class=footer__link-item>Blog<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/live-codes/livecodes target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://twitter.com/livecodes_io target=_blank rel="noopener noreferrer" class=footer__link-item>𝕏 / Twitter<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://dev.to/livecodes_io target=_blank rel="noopener noreferrer" class=footer__link-item>Dev<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://www.npmjs.com/package/livecodes target=_blank rel="noopener noreferrer" class=footer__link-item>npm<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_nPIU><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://status.livecodes.io target=_blank rel="noopener noreferrer" class="footer__link-item status-link"><span>Status</span><svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=footer__copyright><br> Released under the MIT License <br>
Copyright © 2025
<a href=https://github.com/hatemhosny target=_blank rel="noopener noreferrer">Hatem Hosny</a></div></div></div></footer></div>
Reference in New Issue View Git Blame Copy Permalink