D2 Playground

import%20marimo%0A%0A__generated_with%20%3D%20%220.13.0%22%0Aapp%20%3D%20marimo.App(%0A%20%20%20%20width%3D%22full%22%2C%0A%20%20%20%20app_title%3D%22D2%20Playground%22%2C%0A%20%20%20%20html_head_file%3D%22head.html%22%2C%0A)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%20D2%20Playground%0A%0A%20%20%20%20%20%20%20%20Dive%20into%20D2%20with%20this%20interactive%20playground%20%E2%80%94%20create%20diagrams%20from%20scratch%20or%20explore%20curated%20examples.%0A%0A%20%20%20%20%20%20%20%20%3E%20Inspired%20by%20%5Bplay.d2lang.com%5D(https%3A%2F%2Fplay.d2lang.com%2F)%2C%20powered%20by%20%5Bd2-widget%5D(https%3A%2F%2Fgithub.com%2Fpeter-gy%2Fd2-widget)%20and%20%5Bmarimo%5D(https%3A%2F%2Fmarimo.io%2F).%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(%0A%20%20%20%20download_d2%2C%0A%20%20%20%20download_svg%2C%0A%20%20%20%20editor%2C%0A%20%20%20%20mo%2C%0A%20%20%20%20padding%2C%0A%20%20%20%20scale%2C%0A%20%20%20%20show_editor%2C%0A%20%20%20%20sketch%2C%0A%20%20%20%20theme%2C%0A%20%20%20%20widget%2C%0A%20%20%20%20with_label%2C%0A)%3A%0A%20%20%20%20mo.vstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.hstack(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20with_label(show_editor%2C%20%22%F0%9F%91%80%20Show%20Editor%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20with_label(theme%2C%20%22%F0%9F%8E%A8%20Theme%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20with_label(sketch%2C%20%22%E2%9C%8F%EF%B8%8F%20Sketch%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20with_label(padding%2C%20%22%E2%86%95%EF%B8%8F%20Padding%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20with_label(scale%2C%20%22%F0%9F%94%8D%20Scale%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mo.vstack(%5Bdownload_svg%2C%20download_d2%5D)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%22----%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.hstack(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20*(%5Beditor%5D%20if%20show_editor.value%20else%20%5B%5D)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20widget%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20widths%3D%22equal%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(snippets)%3A%0A%20%20%20%20snippets%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(get_script%2C%20mo%2C%20set_script)%3A%0A%20%20%20%20editor%20%3D%20mo.ui.code_editor(%0A%20%20%20%20%20%20%20%20value%3Dget_script()%2C%0A%20%20%20%20%20%20%20%20min_height%3D400%2C%0A%20%20%20%20%20%20%20%20max_height%3D800%2C%0A%20%20%20%20%20%20%20%20show_copy_button%3DTrue%2C%0A%20%20%20%20%20%20%20%20on_change%3Dset_script%2C%0A%20%20%20%20%20%20%20%20debounce%3D250%2C%0A%20%20%20%20)%0A%20%20%20%20return%20(editor%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(d2_widget%2C%20mo)%3A%0A%20%20%20%20widget%20%3D%20mo.ui.anywidget(d2_widget.Widget(%22%22))%0A%20%20%20%20return%20(widget%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(get_script%2C%20padding%2C%20scale%2C%20sketch%2C%20theme%2C%20theme_id%2C%20widget)%3A%0A%20%20%20%20widget.diagram%20%3D%20get_script()%0A%20%20%20%20widget.options%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22target%22%3A%20%22*%22%2C%0A%20%20%20%20%20%20%20%20%22sketch%22%3A%20sketch.value%2C%0A%20%20%20%20%20%20%20%20%22themeID%22%3A%20theme_id(theme.value)%2C%0A%20%20%20%20%20%20%20%20%22pad%22%3A%20padding.value%2C%0A%20%20%20%20%20%20%20%20%22scale%22%3A%20scale.value%2C%0A%20%20%20%20%20%20%20%20%22animateInterval%22%3A%202000%2C%0A%20%20%20%20%20%20%20%20%22center%22%3A%20True%2C%0A%20%20%20%20%7D%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(get_should_show_editor%2C%20mo%2C%20set_should_show_editor)%3A%0A%20%20%20%20show_editor%20%3D%20mo.ui.switch(%0A%20%20%20%20%20%20%20%20get_should_show_editor()%2C%20on_change%3Dset_should_show_editor%0A%20%20%20%20)%0A%20%20%20%20return%20(show_editor%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo%2C%20theme_config)%3A%0A%20%20%20%20sketch%20%3D%20mo.ui.switch(False)%0A%0A%20%20%20%20theme%20%3D%20mo.ui.dropdown(%0A%20%20%20%20%20%20%20%20options%3D%5Bcfg%5B%22name%22%5D%20for%20cfg%20in%20theme_config%5D%2C%0A%20%20%20%20%20%20%20%20value%3Dtheme_config%5B0%5D%5B%22name%22%5D%2C%0A%20%20%20%20%20%20%20%20allow_select_none%3DFalse%2C%0A%20%20%20%20)%0A%0A%20%20%20%20padding%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20start%3D0%2C%0A%20%20%20%20%20%20%20%20stop%3D150%2C%0A%20%20%20%20%20%20%20%20step%3D10%2C%0A%20%20%20%20%20%20%20%20value%3D50%2C%0A%20%20%20%20%20%20%20%20debounce%3DTrue%2C%0A%20%20%20%20%20%20%20%20show_value%3DTrue%2C%0A%20%20%20%20)%0A%0A%20%20%20%20scale%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20start%3D0%2C%0A%20%20%20%20%20%20%20%20stop%3D1.0%2C%0A%20%20%20%20%20%20%20%20step%3D0.05%2C%0A%20%20%20%20%20%20%20%20value%3D1.0%2C%0A%20%20%20%20%20%20%20%20debounce%3DTrue%2C%0A%20%20%20%20%20%20%20%20show_value%3DTrue%2C%0A%20%20%20%20)%0A%20%20%20%20return%20padding%2C%20scale%2C%20sketch%2C%20theme%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo%2C%20widget)%3A%0A%20%20%20%20download_svg%20%3D%20mo.download(%0A%20%20%20%20%20%20%20%20data%3Dwidget.svg.encode(%22utf-8%22)%2C%0A%20%20%20%20%20%20%20%20filename%3D%22diagram.svg%22%2C%0A%20%20%20%20%20%20%20%20mimetype%3D%22image%2Fsvg%2Bxml%22%2C%0A%20%20%20%20%20%20%20%20label%3D%22Download%20SVG%22%2C%0A%20%20%20%20)%0A%0A%20%20%20%20download_d2%20%3D%20mo.download(%0A%20%20%20%20%20%20%20%20data%3Dwidget.diagram.encode(%22utf-8%22)%2C%0A%20%20%20%20%20%20%20%20filename%3D%22diagram.d2%22%2C%0A%20%20%20%20%20%20%20%20mimetype%3D%22text%2Fplain%22%2C%0A%20%20%20%20%20%20%20%20label%3D%22Download%20D2%22%2C%0A%20%20%20%20)%0A%20%20%20%20return%20download_d2%2C%20download_svg%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20theme_config%20%3D%20%5B%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%200%2C%20%22name%22%3A%20%22Default%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%201%2C%20%22name%22%3A%20%22Neutral%20gray%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%203%2C%20%22name%22%3A%20%22Flagship%20Terrastruct%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%204%2C%20%22name%22%3A%20%22Cool%20classics%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%205%2C%20%22name%22%3A%20%22Mixed%20berry%20blue%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%206%2C%20%22name%22%3A%20%22Grape%20soda%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%207%2C%20%22name%22%3A%20%22Aubergine%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%208%2C%20%22name%22%3A%20%22Colorblind%20clear%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%20100%2C%20%22name%22%3A%20%22Vanilla%20nitro%20cola%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%20101%2C%20%22name%22%3A%20%22Orange%20creamsicle%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%20102%2C%20%22name%22%3A%20%22Shirley%20temple%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%20103%2C%20%22name%22%3A%20%22Earth%20tones%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%20104%2C%20%22name%22%3A%20%22Everglade%20green%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%20105%2C%20%22name%22%3A%20%22Buttered%20toast%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%20200%2C%20%22name%22%3A%20%22Dark%20mauve%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%20300%2C%20%22name%22%3A%20%22Terminal%22%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22id%22%3A%20301%2C%20%22name%22%3A%20%22Terminal%20grayscale%22%7D%2C%0A%20%20%20%20%5D%0A%0A%20%20%20%20def%20theme_id(name%3A%20str)%20-%3E%20int%3A%0A%20%20%20%20%20%20%20%20for%20cfg%20in%20theme_config%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20cfg%5B%22name%22%5D%20%3D%3D%20name%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20cfg%5B%22id%22%5D%0A%0A%20%20%20%20%20%20%20%20raise%20ValueError(f%22Unknown%20theme%20name%3A%20%7Bname%7D%22)%0A%0A%20%20%20%20return%20theme_config%2C%20theme_id%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20def%20with_label(widget%2C%20label%3A%20str)%3A%0A%20%20%20%20%20%20%20%20return%20mo.vstack(%5Bmo.md(label)%2C%20widget%5D)%0A%0A%20%20%20%20return%20(with_label%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(find_script%2C%20mo%2C%20set_script%2C%20set_should_show_editor%2C%20snippets_data)%3A%0A%20%20%20%20def%20on_snippet_selected(value%3A%20list%5Bdict%5D)%3A%0A%20%20%20%20%20%20%20%20selection%3A%20dict%20%3D%20value%5B0%5D%0A%20%20%20%20%20%20%20%20script%20%3D%20find_script(selection%5B%22Name%22%5D)%0A%20%20%20%20%20%20%20%20set_script(script)%0A%20%20%20%20%20%20%20%20set_should_show_editor(False)%0A%0A%20%20%20%20snippets%20%3D%20mo.ui.table(%0A%20%20%20%20%20%20%20%20data%3Dsnippets_data%2C%0A%20%20%20%20%20%20%20%20label%3D%22Snippets%20from%20%5Bterrastruct%2Fd2-docs%5D(https%3A%2F%2Fgithub.com%2Fterrastruct%2Fd2-docs%2Ftree%2Fmaster%2Fstatic)%22%2C%0A%20%20%20%20%20%20%20%20page_size%3D5%2C%0A%20%20%20%20%20%20%20%20selection%3D%22single%22%2C%0A%20%20%20%20%20%20%20%20on_change%3Don_snippet_selected%2C%0A%20%20%20%20)%0A%20%20%20%20return%20(snippets%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(httpx)%3A%0A%20%20%20%20SNIPPETS_URL%20%3D%20%22https%3A%2F%2Fraw.githubusercontent.com%2Fpeter-gy%2Fd2-widget%2Frefs%2Fheads%2Fmain%2Fplayground%2Fsnippets.json%22%0A%20%20%20%20snippets_data_full%20%3D%20httpx.get(SNIPPETS_URL).json()%0A%20%20%20%20return%20(snippets_data_full%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(snippets_data_full)%3A%0A%20%20%20%20snippets_data%20%3D%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Category%22%3A%20s%5B%22category%22%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Name%22%3A%20s%5B%22name%22%5D%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20for%20s%20in%20snippets_data_full%0A%20%20%20%20%5D%0A%0A%20%20%20%20def%20find_script(name%3A%20str)%20-%3E%20str%3A%0A%20%20%20%20%20%20%20%20for%20s%20in%20snippets_data_full%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20s%5B%22name%22%5D%20%3D%3D%20name%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20s%5B%22script%22%5D%0A%0A%20%20%20%20%20%20%20%20raise%20ValueError(f'No%20script%20found%20for%20snippet%20%22%7Bname%7D%22')%0A%0A%20%20%20%20return%20find_script%2C%20snippets_data%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(INITIAL_SCRIPT%2C%20mo)%3A%0A%20%20%20%20get_script%2C%20set_script%20%3D%20mo.state(INITIAL_SCRIPT%2C%20allow_self_loops%3DFalse)%0A%20%20%20%20get_should_show_editor%2C%20set_should_show_editor%20%3D%20mo.state(%0A%20%20%20%20%20%20%20%20True%2C%20allow_self_loops%3DFalse%0A%20%20%20%20)%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20get_script%2C%0A%20%20%20%20%20%20%20%20get_should_show_editor%2C%0A%20%20%20%20%20%20%20%20set_script%2C%0A%20%20%20%20%20%20%20%20set_should_show_editor%2C%0A%20%20%20%20)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20INITIAL_SCRIPT%20%3D%20%22%22%22direction%3A%20right%0A%0A%20%20%20%20nbenv%3A%20%22Python%20Notebook%20Environment%22%20%7B%0A%20%20%20%20%20%20shape%3A%20image%0A%20%20%20%20%20%20icon%3A%20https%3A%2F%2Fraw.githubusercontent.com%2Fpeter-gy%2Fd2-widget%2Frefs%2Fheads%2Fmain%2Fassets%2Fnotebook-envs.svg%0A%20%20%20%20%7D%0A%0A%20%20%20%20d2widget%3A%20%22d2-widget%22%20%7B%0A%20%20%20%20%20%20icon%3A%20https%3A%2F%2Fraw.githubusercontent.com%2Fpeter-gy%2Fd2-widget%2Frefs%2Fheads%2Fmain%2Fassets%2Flogo.png%0A%20%20%20%20%20%20d2%3A%20%22D2%22%20%7B%0A%20%20%20%20%20%20%20%20shape%3A%20image%0A%20%20%20%20%20%20%20%20icon%3A%20https%3A%2F%2Fd2lang.com%2Fimg%2Fd2_graphic.svg%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20anywidget%20%7B%0A%20%20%20%20%20%20%20%20shape%3A%20image%0A%20%20%20%20%20%20%20%20icon%3A%20https%3A%2F%2Fanywidget.dev%2Ffavicon.svg%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20d2widget.anywidget%20-%3E%20d2widget.d2%20-%3E%20d2widget.anywidget%20%7Bstyle.animated%3A%20true%7D%0A%0A%20%20%20%20nbenv%20-%3E%20d2widget%20%7Bstyle.animated%3A%20true%7D%0A%20%20%20%20%22%22%22%0A%20%20%20%20return%20(INITIAL_SCRIPT%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20import%20httpx%0A%20%20%20%20import%20marimo%20as%20mo%0A%0A%20%20%20%20import%20d2_widget%0A%0A%20%20%20%20return%20d2_widget%2C%20httpx%2C%20mo%0A%0A%0Aif%20__name__%20%3D%3D%20%22__main__%22%3A%0A%20%20%20%20app.run()%0A