├── .github └── workflows │ ├── ci.yml │ └── daily.yml ├── .gitignore ├── .gitmodules ├── LICENSE.txt ├── Makefile ├── README.md ├── babel.config.js ├── blog ├── animation.md ├── c4.md ├── dark_mode.md ├── powerpoint.md └── sketch.md ├── ci ├── deploy.sh ├── layout_gallery.sh └── render.sh ├── docs ├── releases │ ├── 0.0.13.md │ ├── 0.1.0.md │ ├── 0.1.1.md │ ├── 0.1.2.md │ ├── 0.1.3.md │ ├── 0.1.4.md │ ├── 0.1.5.md │ ├── 0.1.6.md │ ├── 0.2.0.md │ ├── 0.2.1.md │ ├── 0.2.2.md │ ├── 0.2.3.md │ ├── 0.2.4.md │ ├── 0.2.5.md │ ├── 0.2.6.md │ ├── 0.3.0.md │ ├── 0.4.0.md │ ├── 0.4.1.md │ ├── 0.4.2.md │ ├── 0.5.0.md │ ├── 0.5.1.md │ ├── 0.6.0.md │ ├── 0.6.1.md │ ├── 0.6.2.md │ ├── 0.6.3.md │ ├── 0.6.4.md │ ├── 0.6.5.md │ ├── 0.6.6.md │ ├── 0.6.7.md │ ├── 0.6.8.md │ ├── 0.6.9.md │ ├── 0.7.0.md │ └── intro.md └── tour │ ├── api.md │ ├── auto-formatter.md │ ├── cheat-sheet.md │ ├── classes.md │ ├── comments.md │ ├── community.md │ ├── composition-formats.md │ ├── composition.md │ ├── confluence.md │ ├── connections.md │ ├── containers.md │ ├── dagre.md │ ├── design.md │ ├── dimensions.md │ ├── discord.md │ ├── editor-support.md │ ├── elk.md │ ├── experience.md │ ├── exports.md │ ├── extensions.md │ ├── faq.md │ ├── fonts.md │ ├── future.md │ ├── globs.md │ ├── grid-diagrams.md │ ├── hello-world.md │ ├── help.md │ ├── icons.md │ ├── imported-template.d2 │ ├── imported-template.md │ ├── imports-use-cases.md │ ├── imports.md │ ├── install.md │ ├── interactive.md │ ├── intro.md │ ├── layers.md │ ├── layouts.md │ ├── legend.md │ ├── linking.md │ ├── man.md │ ├── model-view.md │ ├── models.md │ ├── modular-classes.md │ ├── nested-composition.md │ ├── obsidian.md │ ├── overrides.md │ ├── positions.md │ ├── scenarios.md │ ├── sequence-diagrams.md │ ├── shapes.md │ ├── sketch.md │ ├── slack.md │ ├── sql-tables.md │ ├── steps.md │ ├── strings.md │ ├── studio.md │ ├── style.md │ ├── tala.md │ ├── text.md │ ├── themes.md │ ├── troubleshoot.md │ ├── uml-classes.md │ ├── vars.md │ ├── version-visualization.md │ ├── vim.md │ └── vscode.md ├── docusaurus.config.js ├── i18n ├── ko │ └── docusaurus-plugin-content-docs │ │ └── current │ │ └── tour │ │ ├── community.md │ │ ├── connections.md │ │ ├── containers.md │ │ ├── design.md │ │ ├── experience.md │ │ ├── future.md │ │ ├── grid-diagrams.md │ │ ├── hello-world.md │ │ ├── icons.md │ │ ├── install.md │ │ ├── intro.md │ │ ├── sequence-diagrams.md │ │ ├── shapes.md │ │ ├── sql-tables.md │ │ ├── style.md │ │ ├── text.md │ │ ├── themes.md │ │ └── uml-classes.md └── zh-cn │ └── docusaurus-plugin-content-docs │ └── current │ └── tour │ ├── cheat-sheet.md │ ├── comments.md │ └── hello-world.md ├── make.sh ├── package.json ├── sidebars.js ├── src ├── components │ ├── Directory │ │ ├── FeatureHighlights.jsx │ │ ├── GetInvolved │ │ │ ├── GetInvolved.jsx │ │ │ └── GetInvolved.scss │ │ └── MoreFeatures.jsx │ └── Features │ │ ├── Features.jsx │ │ └── Features.scss ├── pages │ ├── Directory.scss │ └── index.js ├── styles │ ├── custom.scss │ ├── fonts.scss │ ├── navbar.scss │ ├── search.scss │ ├── sidebar.scss │ └── variables.scss └── theme │ ├── BlogSidebar │ ├── Desktop │ │ ├── index.js │ │ └── styles.module.css │ ├── Mobile │ │ ├── index.js │ │ └── styles.module.css │ └── index.js │ ├── CodeBlock │ ├── CodeBlock.scss │ ├── index.js │ └── metadata-consts.js │ ├── Footer │ ├── footer.scss │ └── index.js │ ├── NavbarItem │ ├── ComponentTypes.js │ ├── NavbarIconLink.jsx │ └── index.js │ ├── TOC │ ├── index.js │ └── styles.module.css │ └── TOCCollapsible │ └── CollapseButton │ ├── index.js │ └── styles.module.css ├── static ├── bespoke-d2 │ ├── animated.d2 │ ├── c4-code.d2 │ ├── cat.d2 │ ├── chicken.d2 │ ├── classes-3.d2 │ ├── cult.d2 │ ├── data.d2 │ ├── grid-column-dominant.d2 │ ├── grid-nested-connections.d2 │ ├── grid-nested-grid.d2 │ ├── grid-row-dominant.d2 │ ├── imports-nested.d2 │ ├── johnwick.d2 │ ├── lotr.d2 │ ├── pizza.d2 │ ├── serviceB.d2 │ ├── styles-animated.d2 │ ├── tax.d2 │ ├── terminal-theme.d2 │ ├── theme-override.d2 │ ├── tiktok.d2 │ ├── triple-glob.d2 │ └── wcc.d2 ├── blog │ ├── dark_mode │ │ ├── main.d2 │ │ ├── main.svg2 │ │ ├── perma.d2 │ │ ├── permadark.png │ │ ├── permalight.png │ │ └── render.sh │ └── sketch │ │ ├── animated.d2 │ │ ├── animated.svg2 │ │ ├── excalidraw.png │ │ ├── main.d2 │ │ ├── main.svg2 │ │ ├── overlay.png │ │ └── render.sh ├── d2 │ ├── c4-code1.d2 │ ├── c4-code2.d2 │ ├── c4-legend.d2 │ ├── c4-models.d2 │ ├── c4-tags2.d2 │ ├── c4-tags3.d2 │ ├── c4-view1.d2 │ ├── c4-view2.d2 │ ├── c4.d2 │ ├── classes-1.d2 │ ├── classes-2.d2 │ ├── classes.d2 │ ├── code-2.d2 │ ├── code.d2 │ ├── connections-1.d2 │ ├── connections-2.d2 │ ├── connections-3.d2 │ ├── connections-4.d2 │ ├── connections-5.d2 │ ├── connections-reference.d2 │ ├── containers-1.d2 │ ├── containers-2.d2 │ ├── containers-3.d2 │ ├── containers-underscore.d2 │ ├── dimensions.d2 │ ├── direction-right.d2 │ ├── direction-up.d2 │ ├── globs-casing.d2 │ ├── globs-connections.d2 │ ├── globs-filter-2.d2 │ ├── globs-filter-3.d2 │ ├── globs-filter-endpoints.d2 │ ├── globs-filter-glob-value.d2 │ ├── globs-filter.d2 │ ├── globs-indexed-connections.d2 │ ├── globs-intro.d2 │ ├── globs-inverse-filter.d2 │ ├── globs-lazy.d2 │ ├── globs-multiple.d2 │ ├── globs-nested.d2 │ ├── globs-recursive-2.d2 │ ├── globs-recursive.d2 │ ├── globs-scope.d2 │ ├── grid-2.d2 │ ├── grid-3.d2 │ ├── grid-4.d2 │ ├── grid-aligned.d2 │ ├── grid-connected.d2 │ ├── grid-connections.d2 │ ├── grid-dimensions.d2 │ ├── grid-fill.d2 │ ├── grid-nested-grid.d2 │ ├── grid-padding-1.d2 │ ├── grid-padding-2.d2 │ ├── grid-unaligned.d2 │ ├── grid.d2 │ ├── hello-world.d2 │ ├── icon-placement.d2 │ ├── icons-1.d2 │ ├── icons-image.d2 │ ├── imports-classes-main.d2 │ ├── imports-mv-access-view.d2 │ ├── imports-mv-ssh-view.d2 │ ├── imports-normal-x.d2 │ ├── imports-normal.d2 │ ├── imports-targeted.d2 │ ├── imports-template.d2 │ ├── imports-vv-history.d2 │ ├── imports-wrapper-template.d2 │ ├── japan.d2 │ ├── language.d2 │ ├── latex.d2 │ ├── legend-hidden.d2 │ ├── legend.d2 │ ├── links.d2 │ ├── markdown-label.d2 │ ├── markdown.d2 │ ├── md-table.d2 │ ├── models.d2 │ ├── multiple-classes.d2 │ ├── near-constant.d2 │ ├── near-container.d2 │ ├── near-explanation.d2 │ ├── near-label-icon.d2 │ ├── non-markdown-text.d2 │ ├── null-attribute.d2 │ ├── null-basic.d2 │ ├── null-connection.d2 │ ├── null-implicit-connection.d2 │ ├── null-implicit-descendant.d2 │ ├── ordered-classes.d2 │ ├── overrides-1.d2 │ ├── overrides-2.d2 │ ├── people.d2 │ ├── pill.d2 │ ├── sequence-diagrams-1.d2 │ ├── sequence-diagrams-2.d2 │ ├── sequence-diagrams-3.d2 │ ├── sequence-diagrams-4.d2 │ ├── sequence-diagrams-group.d2 │ ├── sequence-diagrams-lifeline.d2 │ ├── sequence-diagrams-note.d2 │ ├── sequence-diagrams-scope.d2 │ ├── sequence-diagrams-self.d2 │ ├── shapes-1.d2 │ ├── shapes-2.d2 │ ├── shapes-3.d2 │ ├── strings-1.d2 │ ├── strings-2.d2 │ ├── style-classes-1.d2 │ ├── style-classes-2.d2 │ ├── styles-3d.d2 │ ├── styles-base.d2 │ ├── styles-border-radius.d2 │ ├── styles-double-border.d2 │ ├── styles-fill-pattern.d2 │ ├── styles-fill-transparent.d2 │ ├── styles-fill.d2 │ ├── styles-font-color.d2 │ ├── styles-font-size.d2 │ ├── styles-font.d2 │ ├── styles-multiple.d2 │ ├── styles-opacity.d2 │ ├── styles-root.d2 │ ├── styles-shadow.d2 │ ├── styles-stroke-dash.d2 │ ├── styles-stroke-width.d2 │ ├── styles-stroke.d2 │ ├── styles-table-color.d2 │ ├── styles-table-fill.d2 │ ├── styles-table-stroke.d2 │ ├── styles-text-decoration.d2 │ ├── styles-text-transform.d2 │ ├── suspend-2.d2 │ ├── suspend-3.d2 │ ├── suspend-4.d2 │ ├── suspend.d2 │ ├── table.d2 │ ├── tables-1.d2 │ ├── tables-2.d2 │ ├── tables-3.d2 │ ├── text-2.d2 │ ├── theme-table-2.d2 │ ├── theme-table.d2 │ ├── tooltip.d2 │ ├── unicode.d2 │ ├── users-current.d2 │ ├── users-v0.1.d2 │ ├── vars-config.d2 │ ├── vars-escaped.d2 │ ├── vars-intro.d2 │ ├── vars-nested.d2 │ ├── vars-scoped.d2 │ └── vars-spread.d2 ├── features │ ├── d2 docs icons updated │ │ ├── cheat sheet.svg │ │ ├── exports.svg │ │ ├── extension.svg │ │ └── theme.svg │ └── icons │ │ ├── api.svg │ │ ├── autoformat.svg │ │ ├── blog.svg │ │ ├── cheat-sheet.svg │ │ ├── classes.svg │ │ ├── cli.svg │ │ ├── containers.svg │ │ ├── dark_mode.svg │ │ ├── discord.svg │ │ ├── engines.svg │ │ ├── exports.svg │ │ ├── extension.svg │ │ ├── fonts.svg │ │ ├── globs.svg │ │ ├── images.svg │ │ ├── import.svg │ │ ├── languages.svg │ │ ├── markdown.svg │ │ ├── os.svg │ │ ├── playground.svg │ │ ├── sequence_diagram.svg │ │ ├── tables.svg │ │ ├── tooltip.svg │ │ ├── variables.svg │ │ └── vscode.svg ├── fonts │ └── SourceSansPro │ │ ├── SourceSansPro-Black.ttf │ │ ├── SourceSansPro-BlackItalic.ttf │ │ ├── SourceSansPro-Bold.ttf │ │ ├── SourceSansPro-BoldItalic.ttf │ │ ├── SourceSansPro-ExtraLight.ttf │ │ ├── SourceSansPro-ExtraLightItalic.ttf │ │ ├── SourceSansPro-Italic.ttf │ │ ├── SourceSansPro-Light.ttf │ │ ├── SourceSansPro-LightItalic.ttf │ │ ├── SourceSansPro-Regular.ttf │ │ ├── SourceSansPro-SemiBold.ttf │ │ └── SourceSansPro-SemiBoldItalic.ttf ├── icons │ ├── checkcircle.svg │ ├── clipboard.svg │ └── externallink.svg ├── img │ ├── blog │ │ ├── dark_mode.png │ │ └── sketch.png │ ├── color-code.png │ ├── d2_discord.png │ ├── d2_graphic.svg │ ├── d2_logo.png │ ├── d2_slack.png │ ├── directory │ │ └── circles.svg │ ├── favicon.ico │ ├── generated │ │ ├── animated.svg2 │ │ ├── c4-code1.svg2 │ │ ├── c4-code2.svg2 │ │ ├── c4-legend.svg2 │ │ ├── c4-models.svg2 │ │ ├── c4-tags1.svg2 │ │ ├── c4-tags2.svg2 │ │ ├── c4-tags3.svg2 │ │ ├── c4-view1.svg2 │ │ ├── c4-view2.svg2 │ │ ├── c4.pdf │ │ ├── c4.svg2 │ │ ├── cat.pdf │ │ ├── chicken.svg2 │ │ ├── classes-1.svg2 │ │ ├── classes-2.svg2 │ │ ├── classes-3.svg2 │ │ ├── code-2.svg2 │ │ ├── code.svg2 │ │ ├── connections-1.svg2 │ │ ├── connections-2.svg2 │ │ ├── connections-3.svg2 │ │ ├── connections-4.svg2 │ │ ├── connections-5.svg2 │ │ ├── connections-reference.svg2 │ │ ├── containers-1.svg2 │ │ ├── containers-2.svg2 │ │ ├── containers-3.svg2 │ │ ├── containers-underscore.svg2 │ │ ├── cult.pptx │ │ ├── dimensions.svg2 │ │ ├── direction-right.svg2 │ │ ├── direction-up.svg2 │ │ ├── explanation.svg2 │ │ ├── globs-casing.svg2 │ │ ├── globs-connections.svg2 │ │ ├── globs-filter-2.svg2 │ │ ├── globs-filter-3.svg2 │ │ ├── globs-filter-endpoints.svg2 │ │ ├── globs-filter-glob-value.svg2 │ │ ├── globs-filter.svg2 │ │ ├── globs-indexed-connections.svg2 │ │ ├── globs-intro.svg2 │ │ ├── globs-inverse-filter.svg2 │ │ ├── globs-lazy.svg2 │ │ ├── globs-multiple.svg2 │ │ ├── globs-nested.svg2 │ │ ├── globs-recursive-2.svg2 │ │ ├── globs-recursive.svg2 │ │ ├── globs-scope.svg2 │ │ ├── grid-2.svg2 │ │ ├── grid-3.svg2 │ │ ├── grid-4.svg2 │ │ ├── grid-aligned.svg2 │ │ ├── grid-column-dominant.svg2 │ │ ├── grid-connected.svg2 │ │ ├── grid-connections.svg2 │ │ ├── grid-dimensions.svg2 │ │ ├── grid-fill.svg2 │ │ ├── grid-nested-connections.svg2 │ │ ├── grid-nested-grid.svg2 │ │ ├── grid-padding-1.svg2 │ │ ├── grid-padding-2.svg2 │ │ ├── grid-row-dominant.svg2 │ │ ├── grid-unaligned.svg2 │ │ ├── grid.svg2 │ │ ├── hello-world.svg2 │ │ ├── icon-placement.svg2 │ │ ├── icons-1.svg2 │ │ ├── icons-connection.svg2 │ │ ├── icons-image.svg2 │ │ ├── imports-classes-main.svg2 │ │ ├── imports-classes.svg2 │ │ ├── imports-mv-access-view.svg2 │ │ ├── imports-mv-models.svg2 │ │ ├── imports-mv-ssh-view.svg2 │ │ ├── imports-nested-data.svg2 │ │ ├── imports-nested-serviceB │ │ │ ├── data.svg2 │ │ │ └── index.svg2 │ │ ├── imports-nested.pdf │ │ ├── imports-normal-x.svg2 │ │ ├── imports-normal.svg2 │ │ ├── imports-targeted-people.svg2 │ │ ├── imports-targeted.svg2 │ │ ├── imports-template.svg2 │ │ ├── imports-vv-history.svg2 │ │ ├── imports-vv-users-current.svg2 │ │ ├── imports-vv-users-v0.1.svg2 │ │ ├── imports-wrapper-template.svg2 │ │ ├── japan.svg2 │ │ ├── johnwick.svg2 │ │ ├── language.svg2 │ │ ├── latex.svg2 │ │ ├── legend-hidden.svg2 │ │ ├── legend.svg2 │ │ ├── links.svg2 │ │ ├── lotr.pdf │ │ ├── markdown-label.svg2 │ │ ├── markdown.svg2 │ │ ├── md-table.svg2 │ │ ├── models.svg2 │ │ ├── multiple-classes.svg2 │ │ ├── near-constant.svg2 │ │ ├── near-container.svg2 │ │ ├── near-explanation.svg2 │ │ ├── near-label-icon.svg2 │ │ ├── non-markdown-text.svg2 │ │ ├── null-attribute.svg2 │ │ ├── null-basic.svg2 │ │ ├── null-connection.svg2 │ │ ├── null-implicit-connection.svg2 │ │ ├── null-implicit-descendant.svg2 │ │ ├── ordered-classes.svg2 │ │ ├── overrides-1.svg2 │ │ ├── overrides-2.svg2 │ │ ├── people.svg2 │ │ ├── pill.svg2 │ │ ├── pizza.svg2 │ │ ├── sequence-diagrams-1.svg2 │ │ ├── sequence-diagrams-2.svg2 │ │ ├── sequence-diagrams-3.svg2 │ │ ├── sequence-diagrams-4.svg2 │ │ ├── sequence-diagrams-group.svg2 │ │ ├── sequence-diagrams-lifeline.svg2 │ │ ├── sequence-diagrams-note.svg2 │ │ ├── sequence-diagrams-scope.svg2 │ │ ├── sequence-diagrams-self.svg2 │ │ ├── shapes-1.svg2 │ │ ├── shapes-2.svg2 │ │ ├── shapes-3.svg2 │ │ ├── strings-1.svg2 │ │ ├── strings-2.svg2 │ │ ├── style-classes-1.svg2 │ │ ├── style-classes-2.svg2 │ │ ├── styles-3d.svg2 │ │ ├── styles-animated.svg2 │ │ ├── styles-base.svg2 │ │ ├── styles-border-radius.svg2 │ │ ├── styles-double-border.svg2 │ │ ├── styles-fill-pattern.svg2 │ │ ├── styles-fill-transparent.svg2 │ │ ├── styles-fill.svg2 │ │ ├── styles-font-color.svg2 │ │ ├── styles-font-size.svg2 │ │ ├── styles-font.svg2 │ │ ├── styles-multiple.svg2 │ │ ├── styles-opacity.svg2 │ │ ├── styles-root.svg2 │ │ ├── styles-shadow.svg2 │ │ ├── styles-stroke-dash.svg2 │ │ ├── styles-stroke-width.svg2 │ │ ├── styles-stroke.svg2 │ │ ├── styles-table-color.svg2 │ │ ├── styles-table-fill.svg2 │ │ ├── styles-table-stroke.svg2 │ │ ├── styles-text-decoration.svg2 │ │ ├── styles-text-transform.svg2 │ │ ├── styles_base.svg2 │ │ ├── suspend-2.svg2 │ │ ├── suspend-3.svg2 │ │ ├── suspend-4.svg2 │ │ ├── suspend.svg2 │ │ ├── table.svg2 │ │ ├── tables-1.svg2 │ │ ├── tables-2.svg2 │ │ ├── tables-3.svg2 │ │ ├── tax.svg2 │ │ ├── terminal-theme-gray.svg2 │ │ ├── terminal-theme.svg2 │ │ ├── text-2.svg2 │ │ ├── theme-override.svg2 │ │ ├── theme-table-2.svg2 │ │ ├── theme-table.svg2 │ │ ├── tiktok.pdf │ │ ├── tooltip.svg2 │ │ ├── triple-glob.pdf │ │ ├── unicode.svg2 │ │ ├── users-current.svg2 │ │ ├── users-v0.1.svg2 │ │ ├── users.svg2 │ │ ├── vars-config.svg2 │ │ ├── vars-escaped.svg2 │ │ ├── vars-intro.svg2 │ │ ├── vars-nested.svg2 │ │ ├── vars-scoped.svg2 │ │ ├── vars-spread.svg2 │ │ └── wcc.pptx │ ├── logo.png │ ├── logo_dark.png │ ├── opengraph.png │ ├── rss.svg │ ├── screenshots │ │ ├── automatable.png │ │ ├── cheatsheet.png │ │ ├── cli.gif │ │ ├── confluence.mp4 │ │ ├── cult_pptx.png │ │ ├── d2_studio.png │ │ ├── discord.mp4 │ │ ├── freeform.png │ │ ├── graph.png │ │ ├── intro-header.png │ │ ├── linked_pdf.png │ │ ├── markdown-2.png │ │ ├── obsidian.mp4 │ │ ├── sequence_glossary.png │ │ ├── slack-test.mp4 │ │ ├── slack.mp4 │ │ ├── tala-direction.png │ │ ├── text-2.png │ │ ├── themes │ │ │ ├── dark.png │ │ │ ├── theme_2.png │ │ │ ├── theme_3.png │ │ │ └── theme_overview.png │ │ ├── tooltip.png │ │ └── wcc_pptx.png │ └── terrastruct_logo.svg ├── layout_gallery │ ├── sample1-dagre.svg2 │ ├── sample1-elk.svg2 │ ├── sample1-tala.svg2 │ ├── sample1.d2 │ ├── sample2-dagre.svg2 │ ├── sample2-elk.svg2 │ ├── sample2-tala.svg2 │ ├── sample2.d2 │ ├── sample3-dagre.svg2 │ ├── sample3-elk.svg2 │ ├── sample3-tala.svg2 │ ├── sample3.d2 │ ├── sample4-dagre.svg2 │ ├── sample4-elk.svg2 │ ├── sample4-tala.svg2 │ ├── sample4.d2 │ ├── sample5-dagre.svg2 │ ├── sample5-elk.svg2 │ ├── sample5-tala-2.svg2 │ ├── sample5-tala.svg2 │ ├── sample5.d2 │ ├── sample6-dagre.svg2 │ ├── sample6-elk.svg2 │ ├── sample6-tala-2.svg2 │ ├── sample6-tala.svg2 │ └── sample6.d2 └── logos │ ├── discord.svg │ └── github.svg └── yarn.lock /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | on: [push, pull_request] 3 | concurrency: 4 | group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.sha }} 5 | cancel-in-progress: true 6 | 7 | jobs: 8 | ci: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v3 12 | - uses: actions/cache@v3 13 | with: 14 | path: ~/.cache/yarn/v6 15 | key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }} 16 | restore-keys: | 17 | ${{ runner.os }}-yarn- 18 | - run: COLOR=1 ./make.sh 19 | env: 20 | GITHUB_TOKEN: ${{ secrets._GITHUB_TOKEN }} 21 | DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }} 22 | nofixups: 23 | runs-on: ubuntu-latest 24 | steps: 25 | - uses: actions/checkout@v3 26 | - run: git submodule update --init 27 | - run: COLOR=1 ./ci/sub/bin/nofixups.sh 28 | env: 29 | GITHUB_TOKEN: ${{ secrets._GITHUB_TOKEN }} 30 | DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }} 31 | -------------------------------------------------------------------------------- /.github/workflows/daily.yml: -------------------------------------------------------------------------------- 1 | name: daily 2 | on: 3 | workflow_dispatch: 4 | schedule: 5 | - cron: '42 0 * * *' # daily at 00:42 6 | concurrency: 7 | group: ${{ github.workflow }} 8 | cancel-in-progress: true 9 | 10 | jobs: 11 | ci: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v3 15 | - uses: actions/cache@v3 16 | with: 17 | path: ~/.cache/yarn/v6 18 | key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }} 19 | restore-keys: | 20 | ${{ runner.os }}-yarn- 21 | - run: COLOR=1 CI_FORCE=1 ./make.sh 22 | env: 23 | GITHUB_TOKEN: ${{ secrets._GITHUB_TOKEN }} 24 | DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }} 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .make-log 2 | .changed-files 3 | .make-log.txt 4 | 5 | # Dependencies 6 | /node_modules 7 | 8 | # Production 9 | /build 10 | 11 | # Generated files 12 | .docusaurus 13 | .cache-loader 14 | 15 | # Misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "src/d2-vscode"] 2 | path = src/d2-vscode 3 | url = https://github.com/terrastruct/d2-vscode 4 | [submodule "ci/sub"] 5 | path = ci/sub 6 | url = https://github.com/terrastruct/ci 7 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright 2022 Terrastruct, Inc. 2 | 3 | Redistribution and use in source and binary forms, with or without modification, are 4 | permitted provided that the following conditions are met: 5 | 6 | 1. Redistributions of source code must retain the above copyright notice, this list of 7 | conditions and the following disclaimer. 8 | 9 | 2. Redistributions in binary form must reproduce the above copyright notice, this list of 10 | conditions and the following disclaimer in the documentation and/or other materials 11 | provided with the distribution. 12 | 13 | 3. Neither the name of the copyright holder nor the names of its contributors may be used 14 | to endorse or promote products derived from this software without specific prior written 15 | permission. 16 | 17 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 18 | EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 19 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE 20 | COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 21 | EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF 22 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) 23 | HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR 24 | TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 25 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 26 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | .POSIX: 2 | 3 | .PHONY: all 4 | all: fmt build 5 | 6 | .PHONY: fmt 7 | fmt: node_modules 8 | prefix "$@" ./ci/sub/bin/fmt.sh 9 | .PHONY: build 10 | build: node_modules 11 | prefix "$@" yarn run prod 12 | .PHONY: node_modules 13 | node_modules: 14 | prefix "$@" yarn $${CI:+--immutable} $${CI:+--immutable-cache} 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # D2 Documentation 2 | 3 | [![ci](https://github.com/terrastruct/d2-docs/actions/workflows/ci.yml/badge.svg)](https://github.com/terrastruct/d2-docs/actions/workflows/ci.yml) 4 | [![daily](https://github.com/terrastruct/d2-docs/actions/workflows/daily.yml/badge.svg)](https://github.com/terrastruct/d2-docs/actions/workflows/daily.yml) 5 | [![license](https://img.shields.io/github/license/terrastruct/d2-docs?color=9cf)](./LICENSE) 6 | 7 | This is language documentation for D2, a modern, open-source text-to-diagram DSL. The 8 | source repository for that is here: 9 | [https://github.com/terrastruct/d2](https://github.com/terrastruct/d2). 10 | 11 | Deployed at [https://d2lang.com](https://d2lang.com). 12 | 13 | ## Reference 14 | 15 | A more formal reference specification is in the works. 16 | 17 | ## Contributing 18 | 19 | ### Development 20 | 21 | Init submodules 22 | 23 | ```sh 24 | git submodule update --init 25 | ``` 26 | 27 | Run dev server 28 | 29 | ```sh 30 | yarn 31 | yarn run dev 32 | ``` 33 | 34 | ### Translations 35 | 36 | Help wanted for translations. 37 | 38 | Current efforts: 39 | 40 | - Korean (Thanks @Baejw0111) 41 | 42 | To preview in dev mode: `yarn dev --locale ko`. 43 | 44 | Translations are filed under `i18n/ko/docusaurus-plugin-content-docs/current`. 45 | 46 | Once we have enough docs translated for a certain language (e.g. above 80%), we'll enable 47 | the locale switcher on the nav bar for that language. 48 | 49 | ### Note 50 | 51 | Diagrams are auto generated by `ci/render.sh`. 52 | 53 | Renders are currently saved as `.svg2` because I don't know how to override Docusaurus's 54 | SVG loader that uses SVGGo which is causing a bug during compression (removing a class). 55 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve("@docusaurus/core/lib/babel/preset")], 3 | }; 4 | -------------------------------------------------------------------------------- /ci/deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | set -eu 3 | 4 | if [ -z ${D2_DOCS_CLOUDFRONT_ID} ]; then 5 | echo "missing env var D2_DOCS_CLOUDFRONT_ID" 6 | exit 1 7 | fi 8 | 9 | if [ -z ${D2_DOCS_S3_BUCKET} ]; then 10 | echo "missing env var D2_DOCS_S3_BUCKET" 11 | exit 1 12 | fi 13 | 14 | if [ -z ${D2_DOCS_ALGOLIA_CRAWLER_API_KEY} ]; then 15 | echo "missing env var D2_DOCS_ALGOLIA_CRAWLER_API_KEY" 16 | exit 1 17 | fi 18 | 19 | npm run prod 20 | aws sts get-caller-identity 21 | aws s3 sync ./build ${D2_DOCS_S3_BUCKET} --delete --acl public-read 22 | aws cloudfront create-invalidation --distribution-id ${D2_DOCS_CLOUDFRONT_ID} --paths "/*" 23 | 24 | curl -H "Content-Type: application/json" \ 25 | -X POST \ 26 | --user dd0bd3fe-db42-4673-89ae-e7e70dfae16b:${D2_DOCS_ALGOLIA_CRAWLER_API_KEY} \ 27 | "https://crawler.algolia.com/api/1/crawlers/2d841c67-ab75-4fb1-9114-f8844363d74c/reindex" 28 | 29 | -------------------------------------------------------------------------------- /ci/layout_gallery.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | set -eu 3 | . "$(dirname "$0")/../ci/sub/lib.sh" 4 | cd -- "$(dirname "$0")/.." 5 | 6 | _tala() { 7 | sh_c D2_LAYOUT=tala hide d2 --theme="$theme" ./static/layout_gallery/"$ex".d2 ./static/layout_gallery/"$ex"-tala.svg2 8 | if [ "$ex" = "sample5" ] || [ "$ex" = "sample6" ]; then 9 | sh_c D2_LAYOUT=tala hide d2 --tala-seed=2 --theme="$theme" ./static/layout_gallery/"$ex".d2 ./static/layout_gallery/"$ex"-tala-2.svg2 10 | fi 11 | } 12 | 13 | _elk() { 14 | sh_c D2_LAYOUT=elk hide d2 --theme="$theme" ./static/layout_gallery/"$ex".d2 ./static/layout_gallery/"$ex"-elk.svg2 15 | } 16 | 17 | _dagre() { 18 | sh_c D2_LAYOUT=dagre hide d2 --theme="$theme" ./static/layout_gallery/"$ex".d2 ./static/layout_gallery/"$ex"-dagre.svg2 19 | } 20 | 21 | main() { 22 | job_parseflags "$@" 23 | theme_index=0 24 | 25 | # alternate between cool and warm 26 | themes=(0 100 1 102 4 104 5 105 6) 27 | for ex in ./static/layout_gallery/*.d2; do 28 | ex=${ex#./static/layout_gallery/} 29 | ex=${ex%.*} 30 | export JOBNAME=$ex 31 | if ! _runjob_filter; then 32 | continue 33 | fi 34 | 35 | theme=${themes[$theme_index]} 36 | bigheader "$ex" 37 | runjob _dagre & 38 | runjob _elk & 39 | runjob _tala & 40 | waitjobs 41 | let theme_index=${theme_index}+1 42 | done 43 | } 44 | 45 | main "$@" 46 | -------------------------------------------------------------------------------- /docs/releases/0.0.13.md: -------------------------------------------------------------------------------- 1 | #### Features 🚀 2 | 3 | - Ability to export to PNG. 4 | 5 | #### Improvements 🔧 6 | 7 | - There is now equivalency between CLI flags and environment variables. For any option, 8 | you can set either the flag or its equivalent environment variable (flags take 9 | precedence). See `d2 --help` for more. 10 | - Install script now uses `brew` for macOS machines with `brew` installed. 11 | 12 | #### Bugfixes 🔴 13 | 14 | - Labels for Image shapes in dagre and ELK are now placed above the shape, to not overlap 15 | with the actual image. 16 | 17 | -------------------------------------------------------------------------------- /docs/releases/0.1.1.md: -------------------------------------------------------------------------------- 1 | #### Improvements 🧹 2 | 3 | - The Windows release binary is now suffixed correctly with `.exe` [#388](https://github.com/terrastruct/d2/issues/388) 4 | 5 | #### Bugfixes ⛑️ 6 | 7 | - Fixed sequence diagram span size for self-edges [#397](https://github.com/terrastruct/d2/pull/397) 8 | -------------------------------------------------------------------------------- /docs/releases/0.1.5.md: -------------------------------------------------------------------------------- 1 | #### Features 🚀 2 | 3 | - Crow foot notation has been added for arrowheads. See [docs](https://d2lang.com/tour/connections#arrowheads) for more. [#578](https://github.com/terrastruct/d2/pull/578). 4 | - Exported SVGs fit to screen on open. [#601](https://github.com/terrastruct/d2/pull/601) 5 | 6 | #### Improvements 🧹 7 | 8 | - Dagre edges are spaced apart to prevent label overlap. [#618](https://github.com/terrastruct/d2/pull/618) 9 | 10 | #### Bugfixes ⛑️ 11 | 12 | - Appendix separator line no longer added to PNG export when appendix doesn't exist. [#582](https://github.com/terrastruct/d2/pull/582) 13 | - Watch mode only fits to screen on initial load. [#601](https://github.com/terrastruct/d2/pull/601) 14 | - Dimensions (`width`/`height`) were incorrectly giving compiler errors when applied on a shape with style. [#614](https://github.com/terrastruct/d2/pull/614) 15 | - `near` would collide with labels if they were on the diagram boundaries in the same position. [#617](https://github.com/terrastruct/d2/pull/617) 16 | - Fixes routing between sql table columns if the column name is the prefix of the table name. [#615](https://github.com/terrastruct/d2/pull/615) 17 | 18 | -------------------------------------------------------------------------------- /docs/releases/0.2.3.md: -------------------------------------------------------------------------------- 1 | Diagrams that link between objects and the source they represent are much more integrated into your overall documentation than standalone diagrams. This release brings the linking feature to PDFs! Try clicking on "GitHub" object in the following PDF: 2 | 3 | [linked.pdf](https://github.com/terrastruct/d2/files/10889489/scratch.pdf) 4 | 5 | Code blocks now adapt to dark mode: 6 | 7 | Screen Shot 2023-03-04 at 11 33 46 AM 8 | 9 | Welcome new contributor @donglixiaoche , who helps D2 support border-radius on connections! 10 | 11 | Screen Shot 2023-03-04 at 11 33 46 AM 12 | 13 | #### Features 🚀 14 | 15 | - PDF exports support linking [#891](https://github.com/terrastruct/d2/issues/891), [#966](https://github.com/terrastruct/d2/pull/966) 16 | - `border-radius` is supported on connections (ELK and TALA only, since dagre uses curves). [#913](https://github.com/terrastruct/d2/pull/913) 17 | 18 | #### Improvements 🧹 19 | 20 | - Code blocks adapt to dark mode [#971](https://github.com/terrastruct/d2/pull/971) 21 | - SVGs are fit to top left by default to avoid issues with zooming. [#954](https://github.com/terrastruct/d2/pull/954) 22 | - Person shapes have labels below them and don't need to expand as much. [#960](https://github.com/terrastruct/d2/pull/960) 23 | 24 | #### Bugfixes ⛑️ 25 | 26 | - Fixes a regression where PNG backgrounds could be cut off in the appendix. [#941](https://github.com/terrastruct/d2/pull/941) 27 | - Fixes zooming not working in watch mode. [#944](https://github.com/terrastruct/d2/pull/944) 28 | - Fixes insufficient vertical padding in dagre with direction: right/left. [#973](https://github.com/terrastruct/d2/pull/973) 29 | -------------------------------------------------------------------------------- /docs/releases/0.2.4.md: -------------------------------------------------------------------------------- 1 | ELK layout has been much improved by increasing node dimensions to make room for nice even padding around ports: 2 | ![elk](https://user-images.githubusercontent.com/3120367/223520168-96dad4c4-3f7f-4c7f-a6d5-5115a6f04e5b.png) 3 | 4 | Do you use ELK more than dagre? We're considering switching d2's default layout engine to ELK, so please chime in to this poll if you have an opinion! https://github.com/terrastruct/d2/discussions/990 5 | 6 | #### Improvements 🧹 7 | 8 | - ELK nodes with > 1 connection grow to ensure padding around ports [#981](https://github.com/terrastruct/d2/pull/981) 9 | - Using a style keyword incorrectly in connections returns clear error message [#989](https://github.com/terrastruct/d2/pull/989) 10 | - Unsemantic Markdown returns clear error message [#994](https://github.com/terrastruct/d2/pull/994) 11 | 12 | #### Bugfixes ⛑️ 13 | 14 | - Accept absolute paths again on the CLI (regression from previous release). [#979](https://github.com/terrastruct/d2/pull/979) 15 | - Fixes some rare undefined behavior using capitalized reserved keywords [#978](https://github.com/terrastruct/d2/pull/978) 16 | - Fixes an error rendering when links contained `&` characters [#988](https://github.com/terrastruct/d2/pull/988) 17 | -------------------------------------------------------------------------------- /docs/releases/0.2.6.md: -------------------------------------------------------------------------------- 1 | #### Features 🚀 2 | 3 | - `--center` flag centers the SVG in the containing viewbox. [#1056](https://github.com/terrastruct/d2/pull/1056) 4 | - Strikethrough in Markdown with `~~`. [#1059](https://github.com/terrastruct/d2/pull/1059) 5 | 6 | #### Improvements 🧹 7 | 8 | - `elk` layout containers no longer overlap the label with children. [#1055](https://github.com/terrastruct/d2/pull/1055) 9 | - `--browser` flag on CLI controls `BROWSER` environment variable for not opening browser in watch mode. [#1052](https://github.com/terrastruct/d2/pull/1052) 10 | - Message emitted by CLI when a particular stage is taking a long time. [#1058](https://github.com/terrastruct/d2/pull/1058) 11 | - `` attribute of HTML in watch mode is the base file name, instead of the whole path. [#1054](https://github.com/terrastruct/d2/pull/1054) 12 | 13 | #### Bugfixes ⛑️ 14 | 15 | - Code blocks are not affected by uppercasing from special themes like Terminal. [#1053](https://github.com/terrastruct/d2/pull/1053) 16 | - Fixes `fill-pattern` replacement in the API. [#1051](https://github.com/terrastruct/d2/pull/1051) 17 | - Fixes multiple `<br/>` elements in a row being mismeasured in Markdown blocks. [#1060](https://github.com/terrastruct/d2/pull/1060) 18 | -------------------------------------------------------------------------------- /docs/releases/0.5.1.md: -------------------------------------------------------------------------------- 1 | This is a hotfix to 0.5.0, imports weren't working on Windows. 2 | 3 | #### Improvements 🧹 4 | 5 | - Improves compiler's tooltip URL check. [#1390](https://github.com/terrastruct/d2/pull/1390) 6 | -------------------------------------------------------------------------------- /docs/releases/0.6.4.md: -------------------------------------------------------------------------------- 1 | #### Features 🚀 2 | 3 | - `style.underline` works on connections [#1836](https://github.com/terrastruct/d2/pull/1836) 4 | - `none` is added as an accepted value for `fill-pattern`. Previously there was no way to cancel the `fill-pattern` on select objects set by a theme that applies it (Origami) [#1882](https://github.com/terrastruct/d2/pull/1882) 5 | 6 | #### Improvements 🧹 7 | 8 | - Dimensions can be set less than label dimensions [#1901](https://github.com/terrastruct/d2/pull/1901) 9 | - Boards no longer inherit `label` fields from parents [#1838](https://github.com/terrastruct/d2/pull/1838) 10 | - Prevents `near` targeting a child of a special object like grid cells, which wasn't doing anything [#1851](https://github.com/terrastruct/d2/pull/1851) 11 | 12 | #### Bugfixes ⛑️ 13 | 14 | - Theme flags on CLI apply to PDFs [#1894](https://github.com/terrastruct/d2/pull/1894) 15 | - Fixes styles in connections not overriding styles set by globs [#1857](https://github.com/terrastruct/d2/pull/1857) 16 | - Fixes `null` being set on a nested shape not working in certain cases when connections also pointed to that shape [#1830](https://github.com/terrastruct/d2/pull/1830) 17 | - Fixes edge case of bad import syntax crashing using d2 as a library [#1829](https://github.com/terrastruct/d2/pull/1829) 18 | - Fixes `style.fill` not applying to markdown [#1872](https://github.com/terrastruct/d2/pull/1872) 19 | - Fixes compiler erroring on certain styles when the shape's `shape` value is not all lowercase (e.g. `Circle`) [#1887](https://github.com/terrastruct/d2/pull/1887) 20 | -------------------------------------------------------------------------------- /docs/releases/0.6.5.md: -------------------------------------------------------------------------------- 1 | D2 0.6.5 has a hotfix for 0.6.4 breaking plugin compatibility. Also includes 2 compiler fixes regarding substitutions/vars. 2 | 3 | #### Bugfixes ⛑️ 4 | 5 | - Fix executable plugins that implement standalone router [#1910](https://github.com/terrastruct/d2/pull/1910) 6 | - Fix compiler error with multiple nested spread substitutions [#1913](https://github.com/terrastruct/d2/pull/1913) 7 | - Fix substitutions from imports into different scopes [#1914](https://github.com/terrastruct/d2/pull/1914) 8 | -------------------------------------------------------------------------------- /docs/releases/0.6.8.md: -------------------------------------------------------------------------------- 1 | #### Features 🚀 2 | 3 | - Render: SVG files render in non-browser contexts (e.g. Inkscape, LaTeX) [#2147](https://github.com/terrastruct/d2/pull/2147) 4 | 5 | #### Improvements 🧹 6 | 7 | - Lib: removes a dependency on external slog that was causing troubles with installation [#2137](https://github.com/terrastruct/d2/pull/2137) 8 | - CLI: attempts writing to path atomically, falling back to non-atomic if failed [#2141](https://github.com/terrastruct/d2/pull/2141) 9 | - Export: pptx has "created at" metadata removed, so successive runs yield the same result [#2169](https://github.com/terrastruct/d2/pull/2160) 10 | - Formatter: empty board keywords (e.g. `layers`) are removed [#2178](https://github.com/terrastruct/d2/pull/2178) 11 | - Render: a tooltip or link by itself will not expand width of shape [#2183](https://github.com/terrastruct/d2/pull/2183) 12 | 13 | #### Bugfixes ⛑️ 14 | 15 | - Render: fixes edge case of a 3d shape with outside label being cut off [#2132](https://github.com/terrastruct/d2/pull/2132) 16 | - Composition: labels for boards set with shorthand `x: y` was not applied [#2182](https://github.com/terrastruct/d2/pull/2182) 17 | - Globs: double globs (`**`) were erroring when used with multiple scenario boards [#2195](https://github.com/terrastruct/d2/pull/2195) 18 | -------------------------------------------------------------------------------- /docs/releases/intro.md: -------------------------------------------------------------------------------- 1 | # Overview 2 | 3 | :::info Latest 4 | 5 | Version: [0.6.9](/releases/0.6.9) (released February 04, 2025) 6 | 7 | Downloads: [Assets](https://github.com/terrastruct/d2/releases/tag/v0.6.9) 8 | 9 | ::: 10 | 11 | These release notes are the same one as the ones on GitHub releases. They are copied here 12 | for convenience and posterity. 13 | 14 | D2 launched to open-source on version 0.0.12, so the changelogs start 0.0.13 and on. 15 | -------------------------------------------------------------------------------- /docs/tour/auto-formatter.md: -------------------------------------------------------------------------------- 1 | # Autoformat 2 | 3 | You almost never have to think about style decisions like indentation, newlines, 4 | number of hyphens, or spacing. D2's auto-formatter will format your D2 file for you on 5 | compile, keeping all your declarations consistent and readable, effortlessly. 6 | 7 | If your file is 8 | 9 | ```d2 10 | aws_s3: AWS S3 California{ 11 | Monitoring ---------->California 12 | } 13 | ``` 14 | 15 | When you compile, it becomes 16 | 17 | ```d2 18 | aws_s3: AWS S3 California { 19 | Monitoring -> California 20 | } 21 | ``` 22 | 23 | ## Running formatter 24 | 25 | If you're using the `d2` CLI, you can run the formatter on files with 26 | 27 | ```sh 28 | d2 fmt file.d2 29 | ``` 30 | 31 | The formatter is meant to be integrated into plugins and extensions which automatically 32 | call the formatter upon file writing. This functionality is dependent on the plugin. 33 | -------------------------------------------------------------------------------- /docs/tour/cheat-sheet.md: -------------------------------------------------------------------------------- 1 | # Cheat Sheet 2 | 3 | Click the preview to download the PDF. 4 | 5 | <a href="https://terrastruct-site-assets.s3.us-west-1.amazonaws.com/documents/d2_cheat_sheet.pdf"> 6 | <img src={require('@site/static/img/screenshots/cheatsheet.png').default} alt="d2 cheat sheet" style={{width:'600px'}}/> 7 | </a> 8 | -------------------------------------------------------------------------------- /docs/tour/comments.md: -------------------------------------------------------------------------------- 1 | # Comments 2 | 3 | D2 has line comments and block comments. 4 | 5 | ## Line comments 6 | 7 | Line comments begin with a hash. 8 | 9 | They can be added as their own line 10 | 11 | ```d2 12 | # Comments start with a hash character and continue until the next newline or EOF. 13 | x -> y 14 | ``` 15 | 16 | Or at the end of a line 17 | 18 | ```d2 19 | x -> y # I am at the end 20 | ``` 21 | 22 | ## Block comments 23 | 24 | Block comments begin and end with three double quotes: 25 | 26 | ```d2 27 | x -> y 28 | 29 | """ 30 | This is a 31 | block comment 32 | """ 33 | 34 | y -> z 35 | ``` 36 | -------------------------------------------------------------------------------- /docs/tour/community.md: -------------------------------------------------------------------------------- 1 | # Getting help & community 2 | 3 | - We have a Discord channel here, <a 4 | href="https://discord.gg/NF6X8K4eDq">https://discord.gg/NF6X8K4eDq</a>. If you have a 5 | question or need help, you'll find responses quickest through this channel. 6 | - Have a proposal, running into a bug, or anything else you want to discuss with the team 7 | and community? D2 uses [GitHub Issues](https://github.com/terrastruct/d2) to track all 8 | TODOs, and [GitHub Discussions](https://github.com/terrastruct/d2/discussions) for 9 | feature requests and ideas. 10 | - If you have a private enquiry, please email us: hi@d2lang.com. 11 | -------------------------------------------------------------------------------- /docs/tour/composition-formats.md: -------------------------------------------------------------------------------- 1 | # Export formats 2 | 3 | Since a diagram composed of multiple boards can't be represented as a single image, the 4 | export options are different. 5 | 6 | - Multiple SVGs 7 | - The default output writes multiple SVG files to your output path. 8 | - They are nicely organized on the file system, with appropriate directories and file 9 | names. 10 | - Internal board links are rewritten to point to those file paths, so they work if you 11 | open the SVG and just click on it. 12 | - Single animated SVG 13 | - This is useful for small compositions. It's great for a small number of Steps or 14 | flipping between some Scenarios, but if the composition has too many boards, the 15 | viewer may get confused or wait until a loop. 16 | - On the CLI, passing `--animate-interval=1200` sets the resulting SVG to be an 17 | animation that stays on each board for 1200ms. 18 | - Single animated GIF 19 | - Same as above, but useful in different contexts, like where SVG is not rendered. 20 | - PDF 21 | - PDF can be multiple pages, so this medium is suitable for multi-board diagrams. 22 | Each board is simply another page, and objects can be linked to those pages. 23 | - This is the most suitable medium for layers currently. 24 | - PowerPoint 25 | - Specify the output as `.pptx` to get a PowerPoint presentation. 26 | - Works on Google Slides, for easy web sharing of multi-board diagrams. 27 | -------------------------------------------------------------------------------- /docs/tour/confluence.md: -------------------------------------------------------------------------------- 1 | # Atlassian Confluence app 2 | 3 | <video className="screenCap" controls width="100%"> 4 | <source src={require('@site/static/img/screenshots/confluence.mp4').default} type="video/mp4" /> 5 | Your browser does not support the video tag. 6 | </video> 7 | 8 | :::info 9 | This app is for D2 Studio and requires an account on D2 Studio. 10 | ::: 11 | 12 | ## Seamless integration between D2 Studio and Confluence 13 | 14 | - Configure once for the team 15 | - Every team member can choose from diagrams on D2 Studio 16 | - Permission settings so that only team diagrams are visible 17 | - Every time diagram updates in D2 Studio, it's updated on the Confluence page 18 | 19 | <a 20 | href="https://marketplace.atlassian.com/apps/1222112/terrastruct" 21 | style={{ 22 | alignItems: "center", 23 | color: "#fff", 24 | backgroundColor: "#0052CC", 25 | border: 0, 26 | borderRadius: "4px", 27 | display: "inline-flex", 28 | fontFamily: "Lato, sans-serif", 29 | fontSize: "16px", 30 | fontWeight: 600, 31 | height: "48px", 32 | justifyContent: "center", 33 | textDecoration: "none", 34 | width: "236px", 35 | marginBottom: "1rem", 36 | }} 37 | > 38 | Install Confluence app 39 | </a> 40 | -------------------------------------------------------------------------------- /docs/tour/containers.md: -------------------------------------------------------------------------------- 1 | import CodeBlock from '@theme/CodeBlock'; 2 | import Containers1 from '@site/static/d2/containers-1.d2'; 3 | import Containers2 from '@site/static/d2/containers-2.d2'; 4 | import Containers3 from '@site/static/d2/containers-3.d2'; 5 | import ContainersUnderscore from '@site/static/d2/containers-underscore.d2'; 6 | 7 | # Containers 8 | 9 | <CodeBlock className="language-d2"> 10 | {Containers1} 11 | </CodeBlock> 12 | 13 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/containers-1.svg2')}}></div> 14 | 15 | ## Nested syntax 16 | 17 | You can avoid repeating containers by creating nested maps. 18 | 19 | <CodeBlock className="language-d2"> 20 | {Containers2} 21 | </CodeBlock> 22 | 23 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/containers-2.svg2')}}></div> 24 | 25 | ## Container labels 26 | 27 | There are two ways define container labels. 28 | 29 | ### 1. Shorthand container labels 30 | 31 | ```d2-incomplete 32 | gcloud: Google Cloud { 33 | ... 34 | } 35 | ``` 36 | 37 | ### 2. Reserved keyword `label` 38 | 39 | ```d2-incomplete 40 | gcloud: { 41 | label: Google Cloud 42 | ... 43 | } 44 | ``` 45 | 46 | ## Example 47 | 48 | <CodeBlock className="language-d2"> 49 | {Containers3} 50 | </CodeBlock> 51 | 52 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/containers-3.svg2')}}></div> 53 | 54 | ## Reference parent 55 | 56 | Sometimes you want to reference something outside of the container from within. The 57 | underscore (`_`) refers to parent. 58 | 59 | <CodeBlock className="language-d2"> 60 | {ContainersUnderscore} 61 | </CodeBlock> 62 | 63 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/containers-underscore.svg2')}}></div> 64 | -------------------------------------------------------------------------------- /docs/tour/dimensions.md: -------------------------------------------------------------------------------- 1 | import CodeBlock from '@theme/CodeBlock'; 2 | import Dimensions from '@site/static/d2/dimensions.d2'; 3 | 4 | # Dimensions 5 | 6 | You can specify the `width` and `height` of most shapes. 7 | 8 | :::info 9 | These keywords cannot be set on containers, since containers resize to fit their children. 10 | ::: 11 | 12 | <CodeBlock className="language-d2"> 13 | {Dimensions} 14 | </CodeBlock> 15 | 16 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/dimensions.svg2')}}></div> 17 | -------------------------------------------------------------------------------- /docs/tour/discord.md: -------------------------------------------------------------------------------- 1 | # Discord plugin 2 | <img width={200} src={require('@site/static/img/d2_discord.png').default} alt="D2 + Discord"/> 3 | 4 | ### The fastest way to explain what you mean mid-conversation 5 | 6 | Keep your projects moving by connecting Terrastruct and Discord. Compile D2 codeblocks by opening the context menu on a D2 codeblock, going to `Apps` and clicking `Compile D2`. 7 | 8 | Configure your exports by using `/d2` inside Discord. 9 | 10 | <a 11 | href="https://discord.com/api/oauth2/authorize?client_id=1053057836541816921&permissions=2147518464&scope=bot" 12 | style={{ 13 | alignItems: "center", 14 | color: "#fff", 15 | backgroundColor: "#5865f2", 16 | border: 0, 17 | borderRadius: "4px", 18 | display: "inline-flex", 19 | fontFamily: "Lato, sans-serif", 20 | fontSize: "16px", 21 | fontWeight: 600, 22 | height: "48px", 23 | justifyContent: "center", 24 | textDecoration: "none", 25 | width: "236px", 26 | marginBottom: "1rem", 27 | }} 28 | > 29 | Add to Discord 30 | </a> 31 | 32 | <video className="screenCap" controls width="100%"> 33 | <source src={require('@site/static/img/screenshots/discord.mp4').default} type="video/mp4" /> 34 | Your browser does not support the video tag. 35 | </video> 36 | -------------------------------------------------------------------------------- /docs/tour/editor-support.md: -------------------------------------------------------------------------------- 1 | # Editor Support 2 | 3 | We have first class language support for both Vim and VS Code. 4 | 5 | Automatic indentation and syntax highlighting are fully supported and make working with 6 | the D2 language far more pleasant. 7 | 8 | - https://github.com/terrastruct/d2-vim 9 | - https://github.com/terrastruct/d2-vscode 10 | 11 | The syntax highlighting will even catch basic errors for you if your color theme 12 | highlights illegal syntax. 13 | -------------------------------------------------------------------------------- /docs/tour/experience.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_label: Dev tool vs design tool 3 | --- 4 | # A diagramming dev tool 5 | 6 | D2 is designed towards a single goal: **turn diagramming into a pleasant experience for 7 | engineers**. Plenty of tools can claim to do that for simple diagrams, but you stop having 8 | a good time as soon as you get to even slightly complex diagrams — the ones that most need 9 | to exist. 10 | 11 | Why is that? Because most diagramming tools today are design tools, not dev tools. They 12 | give you a blank canvas and a drag-and-drop toolbar like you'd see on Figma or Photoshop, 13 | and treat their intended workflow as a design process. Engineers are not visual designers, 14 | and the lack of ability to spatially architect a system should not block the creation of 15 | valuable documentation. Every drag and drop shouldn’t require planning, and updates 16 | shouldn’t be a frustrating exercise in moving things around and resizing to make room for 17 | the new piece. Declarative Diagramming removes that friction. 18 | 19 | Before Hashicorp introduced Terraform to let engineers write infrastructure as text, they 20 | were clicking around AWS and Google Cloud consoles to configure their infrastructure. 21 | Nowadays, that's just unprofessional. Where's the review process, the rollback steps, the 22 | history and version control? It's hard to believe that the future of visual documentation 23 | in companies around the world will predominantly be made with drag-and-drop design tools. 24 | -------------------------------------------------------------------------------- /docs/tour/fonts.md: -------------------------------------------------------------------------------- 1 | # Fonts 2 | 3 | D2 uses 4 font families: 4 | 5 | - [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro) for the majority of 6 | text, including labels, Markdown, etc. 7 | - [Source Code Pro](https://fonts.google.com/specimen/Source+Code+Pro) for code blocks and 8 | text in Class shape. 9 | - A blend of [Architect's Daughter](https://fonts.google.com/specimen/Architects+Daughter) 10 | and [Fuzzy Bubbles](https://fonts.google.com/specimen/Fuzzy+Bubbles) for `sketch` mode 11 | text. 12 | 13 | Currently on the CLI, you can customize fonts by replacing Source Sans Pro with your own 14 | TTF files through the following flags: 15 | 16 | - `--font-regular` 17 | - `--font-italic` 18 | - `--font-bold` 19 | 20 | These should point to a `.ttf` file, for example: 21 | 22 | ```shell 23 | d2 --font-regular=./helvetica-regular.ttf input.d2 24 | ``` 25 | 26 | It's advisable to supply either none or all of the fonts, for consistency. If you supply 27 | one but not all of the fonts, it will fall back to Source Sans Pro for the missing styles. 28 | For example, if you give a `--font-regular` and `--font-bold`, then the italic will remain 29 | as Source Sans Pro Italic. 30 | 31 | :::info 32 | Do you want to customize the fonts for code or sketch mode? Please raise an Issue on 33 | GitHub. We'll support this if there's demand. 34 | ::: 35 | -------------------------------------------------------------------------------- /docs/tour/hello-world.md: -------------------------------------------------------------------------------- 1 | --- 2 | pagination_next: tour/shapes 3 | --- 4 | import CodeBlock from '@theme/CodeBlock'; 5 | import HelloWorld from '@site/static/d2/hello-world.d2'; 6 | 7 | # Hello World 8 | 9 | <CodeBlock className="language-d2"> 10 | {HelloWorld} 11 | </CodeBlock> 12 | 13 | <div 14 | className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/hello-world.svg2')}}></div> 15 | 16 | This declares a connection between two shapes, `x` and `y`, with the label, `hello world`. 17 | -------------------------------------------------------------------------------- /docs/tour/help.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are welcome! Please see the full doc on contributing on D2's Github: 4 | [https://github.com/terrastruct/d2/blob/master/docs/CONTRIBUTING.md](https://github.com/terrastruct/d2/blob/master/docs/CONTRIBUTING.md). 5 | 6 | ## Help wanted 7 | 8 | The above doc is for contributing to D2 core. However, D2's community often requests 9 | things that the core team don't have the bandwidth to do (until D2 reaches 1.0, we're 10 | aggressively prioritizing improvements that make D2 better for the majority of users). 11 | Below is a list of features that could use your help. If you're interested in taking the 12 | initiative, feel free to just start, or you can comment on a GitHub issue, discuss in 13 | Discord, or email us (alex at terrastruct). 14 | 15 | - [ownCloud Infinite Scale Extension](https://github.com/terrastruct/d2/issues/1422) 16 | - [IntelliJ plugin](https://github.com/terrastruct/d2/issues/747) 17 | - [Chocolatey package](https://github.com/terrastruct/d2/issues/154) 18 | - [Docusaurus plugin](https://github.com/terrastruct/d2/issues/1448) 19 | - [Visual Studio Extension](https://github.com/terrastruct/d2/discussions/237) 20 | - [PrismJS highlighter](https://github.com/terrastruct/d2-docs/issues/185) 21 | 22 | Want to add something to this wishlist? Just make an Issue on D2's GitHub! 23 | -------------------------------------------------------------------------------- /docs/tour/imported-template.d2: -------------------------------------------------------------------------------- 1 | # Template 2 | -------------------------------------------------------------------------------- /docs/tour/imported-template.md: -------------------------------------------------------------------------------- 1 | import CodeBlock from '@theme/CodeBlock'; 2 | import ImportsTemplate from '@site/static/d2/imports-template.d2'; 3 | import ImportsWrapperTemplate from '@site/static/d2/imports-wrapper-template.d2'; 4 | 5 | # Template 6 | 7 | You make diagrams for external consulting clients. In order to appear professional, all 8 | diagrams must be contained within a template that your designer has created that is 9 | on-brand. 10 | 11 | - `diagram.d2` 12 | <CodeBlock className="language-d2-incomplete"> 13 | {ImportsTemplate} 14 | </CodeBlock> 15 | 16 | - `wrapper-template.d2` 17 | <CodeBlock className="language-d2-incomplete"> 18 | {ImportsWrapperTemplate} 19 | </CodeBlock> 20 | 21 | :::info 22 | This use case will be made much more powerful when D2 finishes glob (`*`) support. 23 | ::: 24 | 25 | ## Render of `diagram.d2` 26 | 27 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/imports-template.svg2')}}></div> 28 | -------------------------------------------------------------------------------- /docs/tour/imports-use-cases.md: -------------------------------------------------------------------------------- 1 | --- 2 | pagination_next: tour/model-view 3 | --- 4 | 5 | # Overview 6 | 7 | The following are examples of some popular use cases for imports. Fundamentally, D2 8 | imports behave just like dependencies in other programming languages, so it is flexible 9 | for doing much more than the ones shown here. 10 | 11 | ## Patterns 12 | 13 | - [Model-view](./model-view) 14 | - [Modular classes](./modular-classes) 15 | - [Nested composition](./nested-composition) 16 | 17 | ## Principles 18 | 19 | Alongside the patterns that imports can be used for, splitting your diagram into multiple 20 | files can also fulfill useful principles for organizations: 21 | 22 | - **Compliance**. Some core piece of architecture needs to follow a spec exactly, and that 23 | file should not change while others around it can. 24 | - **Domain-driven design**. Diagramming a large architecture? Get different domain experts to 25 | diagram their parts, and put them together in one diagram. 26 | - **Code reviews**. While text-based diagramming makes reviewing changes possible, we've 27 | all been in situations where the diff shown makes the review appear more complex than it 28 | is. When your diagram is more modular, it's easier for everyone to know what's changed. 29 | Maybe the changes to `style.d2` don't need as much scrutiny as the `security.d2` file 30 | changes. 31 | - **Reusability**. Your organization can define one `color-classes.d2`, and that can be 32 | imported and used across all diagrams for a consistent diagram style. 33 | - **Don't repeat yourself**. When multiple files import an object, you only have to make 34 | changes to that one object to update it everywhere else. 35 | 36 | ## More Examples 37 | 38 | Some more creative, practical examples of using imports that mix and match the above 39 | patterns and principles. 40 | 41 | - [Version visualization](./version-visualization) 42 | - [Template](./imported-template) 43 | -------------------------------------------------------------------------------- /docs/tour/install.md: -------------------------------------------------------------------------------- 1 | --- 2 | pagination_next: tour/hello-world 3 | --- 4 | # Install 5 | 6 | :::tip 7 | There are more detailed install instructions for Mac, Windows, and Linux, using a variety of 8 | methods, [here](https://github.com/terrastruct/d2/blob/master/docs/INSTALL.md). This page 9 | is an abridged version. 10 | ::: 11 | 12 | ## Install script 13 | 14 | The recommended way to install is to run our install script, which will figure out the 15 | best way to install based on your machine. E.g. if D2 is available through a package 16 | manager installed, it will use that package manager. 17 | 18 | ```shell 19 | # With --dry-run the install script will print the commands it will use 20 | # to install without actually installing so you know what it's going to do. 21 | curl -fsSL https://d2lang.com/install.sh | sh -s -- --dry-run 22 | # If things look good, install for real. 23 | curl -fsSL https://d2lang.com/install.sh | sh -s -- 24 | ``` 25 | 26 | Follow the instructions, if any. Test your installation was successful by running `d2 27 | version`. 28 | 29 | If you want to uninstall: 30 | 31 | ```shell 32 | curl -fsSL https://d2lang.com/install.sh | sh -s -- --uninstall 33 | ``` 34 | 35 | ## Install from source 36 | 37 | Alternatively, you can install from source: 38 | 39 | ```shell 40 | go install oss.terrastruct.com/d2@latest 41 | ``` 42 | 43 | 44 | :::info 45 | You can also download precompiled binaries specific to your OS on the Github releases 46 | page: 47 | [https://github.com/terrastruct/d2/releases](https://github.com/terrastruct/d2/releases). 48 | ::: 49 | 50 | # Try it out 51 | 52 | ```shell 53 | echo 'x -> y' > input.d2 54 | d2 -w input.d2 out.svg 55 | ``` 56 | 57 | It should have spun up a local web browser that will automatically refresh when you change 58 | `input.d2`. Modify `input.d2` as you go through this tour to follow along. 59 | -------------------------------------------------------------------------------- /docs/tour/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_label: What is D2 3 | pagination_next: tour/experience 4 | --- 5 | import CodeBlock from '@theme/CodeBlock'; 6 | import Example from '@site/static/bespoke-d2/terminal-theme.d2'; 7 | 8 | # D2 Tour 9 | 10 | **D2** is a diagram scripting language that turns text to diagrams. It stands for 11 | **Declarative Diagramming**. Declarative, as in, you describe what you want diagrammed, it 12 | generates the image. 13 | 14 | For example, download the CLI, create a file named `input.d2`, copy paste the following, 15 | run this command, and you get the image below. 16 | 17 | ```sh 18 | d2 --theme=300 --dark-theme=200 -l elk --pad 0 ./input.d2 19 | ``` 20 | 21 | <div style={{width: "100%"}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/terminal-theme.svg2')}}></div> 22 | 23 | <CodeBlock className="language-d2"> 24 | {Example} 25 | </CodeBlock> 26 | 27 | ## Using the CLI watch mode 28 | 29 | <img className="screenCap" width="100%" src={require('@site/static/img/screenshots/cli.gif').default} 30 | alt="D2 CLI"/> 31 | 32 | You can finish this tour in about 5-10 minutes, and at the end, there's a cheat sheet you 33 | can download and refer to. If you want just the bare essentials, <a 34 | href="/tour/hello-world">Getting Started</a> takes 35 | ~2 mins. 36 | 37 | :::info 38 | The source code for D2 is hosted here: 39 | [https://github.com/terrastruct/d2](https://github.com/terrastruct/d2). 40 | 41 | The source code for these docs are here: 42 | [https://github.com/terrastruct/d2-docs](https://github.com/terrastruct/d2-docs). 43 | ::: 44 | 45 | :::info 46 | For each D2 snippet, you can hover over it to open directly in the Playground and tinker. 47 | 48 | There's some exceptions like snippets that use imports. 49 | ::: 50 | -------------------------------------------------------------------------------- /docs/tour/layers.md: -------------------------------------------------------------------------------- 1 | --- 2 | pagination_next: tour/scenarios 3 | --- 4 | import CodeBlock from '@theme/CodeBlock'; 5 | import TikTok from '@site/static/bespoke-d2/tiktok.d2'; 6 | 7 | # Layers 8 | 9 | A "Layer" represents "a layer of abstraction". Each Layer starts off as a blank 10 | board, since you're representing different objects at every level of abstraction. 11 | 12 | Try clicking on the objects. 13 | 14 | <embed src={require('@site/static/img/generated/tiktok.pdf').default} width="100%" height="800" 15 | type="application/pdf" /> 16 | 17 | <CodeBlock className="language-d2-incomplete"> 18 | {TikTok} 19 | </CodeBlock> 20 | -------------------------------------------------------------------------------- /docs/tour/legend.md: -------------------------------------------------------------------------------- 1 | import CodeBlock from '@theme/CodeBlock'; 2 | import Legend from '@site/static/d2/legend.d2'; 3 | import LegendHidden from '@site/static/d2/legend-hidden.d2'; 4 | 5 | # Legend 6 | 7 | Use a special variable, `d2-legend`, to declare a legend. 8 | 9 | <CodeBlock className="language-d2"> 10 | {Legend} 11 | </CodeBlock> 12 | 13 | <div style={{width: "100%"}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/legend.svg2')}}></div> 14 | 15 | ## Hiding shapes 16 | 17 | Since `a -> b` declares 3 things (1 connection and 2 shapes), 3 things will show up on the 18 | legend. If you only intended to show the connection in the legend, you can set the opacity 19 | of shapes to exclude them from the legend. 20 | 21 | <CodeBlock className="language-d2"> 22 | {LegendHidden} 23 | </CodeBlock> 24 | 25 | <div style={{width: "100%"}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/legend-hidden.svg2')}}></div> 26 | -------------------------------------------------------------------------------- /docs/tour/linking.md: -------------------------------------------------------------------------------- 1 | import CodeBlock from '@theme/CodeBlock'; 2 | import Cat from '@site/static/bespoke-d2/cat.d2'; 3 | import LOTR from '@site/static/bespoke-d2/lotr.d2'; 4 | 5 | # Linking between boards 6 | 7 | We've introduced `link` before as a way to jump to external resources. They can also be 8 | used to create interactivity to jump to other boards. We'll call these "internal links". 9 | 10 | Example of internal link: 11 | 12 | <CodeBlock className="language-d2-incomplete"> 13 | {Cat} 14 | </CodeBlock> 15 | 16 | <embed src={require('@site/static/img/generated/cat.pdf').default} width="100%" height="800" 17 | type="application/pdf" /> 18 | 19 | :::info 20 | If your board name has a `.`, use quotes to target that board. 21 | For example: 22 | 23 | ```d2-incomplete 24 | a.link: layers."2012.06" 25 | 26 | layers: { 27 | "2012.06": { 28 | hello 29 | } 30 | } 31 | ``` 32 | ::: 33 | 34 | ## Parent reference 35 | 36 | The underscore `_` is used to refer to the parent scope, but when used in `link` values, 37 | they refer not to parent containers, but to parent boards. 38 | 39 | <CodeBlock className="language-d2-incomplete"> 40 | {LOTR} 41 | </CodeBlock> 42 | 43 | <embed src={require('@site/static/img/generated/lotr.pdf').default} width="100%" height="800" 44 | type="application/pdf" /> 45 | 46 | ## Backlinks 47 | 48 | Notice how the navigation bar at the top is clickable. You can easily return to the root 49 | or any ancestor page by clicking on the text. 50 | -------------------------------------------------------------------------------- /docs/tour/model-view.md: -------------------------------------------------------------------------------- 1 | --- 2 | pagination_next: tour/modular-classes 3 | --- 4 | import CodeBlock from '@theme/CodeBlock'; 5 | import Models from '@site/static/d2/models.d2'; 6 | import ImportsMVAccessView from '@site/static/d2/imports-mv-access-view.d2'; 7 | import ImportsMVSSHView from '@site/static/d2/imports-mv-ssh-view.d2'; 8 | 9 | # Model-view 10 | 11 | A popular pattern defines your models once, and then reuses it across a number of 12 | different views. 13 | 14 | ## `models.d2` 15 | <CodeBlock className="language-d2-incomplete"> 16 | {Models} 17 | </CodeBlock> 18 | 19 | ## `access-view.d2` 20 | <CodeBlock className="language-d2-incomplete"> 21 | {ImportsMVAccessView} 22 | </CodeBlock> 23 | 24 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/imports-mv-access-view.svg2')}}></div> 25 | 26 | ## `ssh-view.d2` 27 | <CodeBlock className="language-d2-incomplete"> 28 | {ImportsMVSSHView} 29 | </CodeBlock> 30 | 31 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/imports-mv-ssh-view.svg2')}}></div> 32 | -------------------------------------------------------------------------------- /docs/tour/modular-classes.md: -------------------------------------------------------------------------------- 1 | import CodeBlock from '@theme/CodeBlock'; 2 | import Classes from '@site/static/d2/classes.d2'; 3 | import ImportsClassesMain from '@site/static/d2/imports-classes-main.d2'; 4 | 5 | # Modular classes 6 | 7 | This pattern mirrors web development, separating HTML and CSS. 8 | 9 | ## `classes.d2` 10 | <CodeBlock className="language-d2-incomplete"> 11 | {Classes} 12 | </CodeBlock> 13 | 14 | ## `main.d2` 15 | <CodeBlock className="language-d2-incomplete"> 16 | {ImportsClassesMain} 17 | </CodeBlock> 18 | 19 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/imports-classes-main.svg2')}}></div> 20 | -------------------------------------------------------------------------------- /docs/tour/nested-composition.md: -------------------------------------------------------------------------------- 1 | import CodeBlock from '@theme/CodeBlock'; 2 | import ImportsNested from '@site/static/bespoke-d2/imports-nested.d2'; 3 | import ServiceB from '@site/static/bespoke-d2/serviceB.d2'; 4 | import Data from '@site/static/bespoke-d2/data.d2'; 5 | 6 | # Nested composition 7 | 8 | Imports make large compositions much more manageable. 9 | 10 | Large diagrams like the ones that take you from high-level overview to low-level details 11 | becomes possible to cleanly construct. 12 | 13 | Rendering `overview.d2` gives us a nested diagram while each file is kept flat and 14 | readable. 15 | 16 | ### `overview.d2` 17 | <CodeBlock className="language-d2-incomplete"> 18 | {ImportsNested} 19 | </CodeBlock> 20 | 21 | ### `serviceB.d2` 22 | <CodeBlock className="language-d2-incomplete"> 23 | {ServiceB} 24 | </CodeBlock> 25 | 26 | ### `data.d2` 27 | <CodeBlock className="language-d2-incomplete"> 28 | {Data} 29 | </CodeBlock> 30 | 31 | ## Render of `overview.d2` 32 | 33 | <embed src={require('@site/static/img/generated/imports-nested.pdf').default} width="100%" height="800" 34 | type="application/pdf" /> 35 | -------------------------------------------------------------------------------- /docs/tour/obsidian.md: -------------------------------------------------------------------------------- 1 | # Obsidian plugin 2 | 3 | D2 has an official plugin for Obsidian. 4 | 5 | Currently it only supports rendering of D2 diagrams. 6 | 7 | 8 | <video className="screenCap" controls width="100%"> 9 | <source src={require('@site/static/img/screenshots/obsidian.mp4').default} type="video/mp4" /> 10 | Your browser does not support the video tag. 11 | </video> 12 | 13 | 14 | **Github:** 15 | [https://github.com/terrastruct/d2-obsidian](https://github.com/terrastruct/d2-obsidian) 16 | -------------------------------------------------------------------------------- /docs/tour/scenarios.md: -------------------------------------------------------------------------------- 1 | import CodeBlock from '@theme/CodeBlock'; 2 | import Animated from '@site/static/bespoke-d2/animated.d2'; 3 | 4 | # Scenarios 5 | 6 | A "Scenario" represents a different view of the base Layer. 7 | 8 | Each Scenario inherits from its base Layer. Any new objects are added onto all objects in 9 | the base Layer, and you can reference any objects from the base Layer to update them. 10 | 11 | Notice that in the below Scenario, we simply turn some objects opacity lower, and define a 12 | new connection to show an alternate view of the deployment diagram. 13 | 14 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/animated.svg2')}}></div> 15 | 16 | <CodeBlock className="language-d2-incomplete"> 17 | {Animated} 18 | </CodeBlock> 19 | -------------------------------------------------------------------------------- /docs/tour/shapes.md: -------------------------------------------------------------------------------- 1 | import CodeBlock from '@theme/CodeBlock'; 2 | import Shapes1 from '@site/static/d2/shapes-1.d2'; 3 | import Shapes2 from '@site/static/d2/shapes-2.d2'; 4 | 5 | # Shapes 6 | 7 | ## Basics 8 | 9 | You can declare shapes like so: 10 | 11 | <CodeBlock className="language-d2"> 12 | {Shapes1} 13 | </CodeBlock> 14 | 15 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/shapes-1.svg2')}}></div> 16 | 17 | You can also use semicolons to define multiple shapes on the same line: 18 | 19 | ```d2 20 | SQLite; Cassandra 21 | ``` 22 | 23 | By default, a shape's label is the same as the shape's key. But if you want it to be different, assign a new label like so: 24 | 25 | ```d2 26 | pg: PostgreSQL 27 | ``` 28 | 29 | By default, a shape's type is `rectangle`. To specify otherwise, provide the field `shape`: 30 | 31 | ```d2 32 | Cloud: my cloud 33 | Cloud.shape: cloud 34 | ``` 35 | 36 | ## Example 37 | 38 | <CodeBlock className="language-d2"> 39 | {Shapes2} 40 | </CodeBlock> 41 | 42 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/shapes-2.svg2')}}></div> 43 | 44 | :::info 45 | Keys are case-insensitive, so `postgresql` and `postgreSQL` will reference the same shape. 46 | ::: 47 | 48 | :::info Shape catalog 49 | 50 | <div className="embedSVG overflow" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/shapes-3.svg2')}}></div> 51 | 52 | There are other values that `shape` can take, but they're special types that are covered 53 | in the next section. 54 | ::: 55 | -------------------------------------------------------------------------------- /docs/tour/sketch.md: -------------------------------------------------------------------------------- 1 | # Sketch (Hand-drawn) 2 | 3 | D2 can render diagrams to give the aesthetic of a hand-drawn sketch. 4 | 5 | <div style={{width:'30%'}} dangerouslySetInnerHTML={{__html: require('@site/static/blog/sketch/animated.svg2')}}></div> 6 | 7 | - In Terrastruct, you can enable this with hand-drawn mode. 8 | - If you're using the CLI, this is enabled by the `--sketch` flag. 9 | - [https://play.d2lang.com](https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&sketch=1) 10 | supports this as well. 11 | 12 | :::info 13 | See our [blog post](/blog/hand-drawn-diagrams) on sketch mode 14 | ::: 15 | -------------------------------------------------------------------------------- /docs/tour/steps.md: -------------------------------------------------------------------------------- 1 | import CodeBlock from '@theme/CodeBlock'; 2 | import Chicken from '@site/static/bespoke-d2/chicken.d2'; 3 | 4 | # Steps 5 | 6 | A "Step" represents a step in a sequence of events. 7 | 8 | Each Step inherits from its the Step before it. The first step inherits from its parent, 9 | whether that's a Scenario or Layer. 10 | 11 | Notice how in Step 3 for example, the object "Approach road" exists even though it's not 12 | defined, because it was inherited from Step 2, which inherited it from Step 1. 13 | 14 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/chicken.svg2')}}></div> 15 | 16 | <CodeBlock className="language-d2-incomplete"> 17 | {Chicken} 18 | </CodeBlock> 19 | -------------------------------------------------------------------------------- /docs/tour/uml-classes.md: -------------------------------------------------------------------------------- 1 | import CodeBlock from '@theme/CodeBlock'; 2 | import Classes1 from '@site/static/d2/classes-1.d2'; 3 | import Classes2 from '@site/static/d2/classes-2.d2'; 4 | import Classes3 from '@site/static/bespoke-d2/classes-3.d2'; 5 | 6 | # UML Classes 7 | 8 | ## Basics 9 | 10 | D2 fully supports UML Class diagrams. Here's a minimal example: 11 | 12 | <CodeBlock className="language-d2"> 13 | {Classes1} 14 | </CodeBlock> 15 | 16 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/classes-1.svg2')}}></div> 17 | 18 | Each key of a `class` shape defines either a field or a method. 19 | 20 | The value of a field key is its type. 21 | 22 | Any key that contains `(` is a method, whose value is the return type. 23 | 24 | A method key without a value has a return type of void. 25 | 26 | ## Visibilities 27 | 28 | You can also use UML-style prefixes to indicate field/method visibility. 29 | 30 | | visibility prefix | meaning | 31 | | ----------------- | --------- | 32 | | none | public | 33 | | + | public | 34 | | - | private | 35 | | # | protected | 36 | 37 | See https://www.uml-diagrams.org/visibility.html 38 | 39 | Here's an example with differing visibilities and more complex types: 40 | 41 | <CodeBlock className="language-d2"> 42 | {Classes2} 43 | </CodeBlock> 44 | 45 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/classes-2.svg2')}}></div> 46 | 47 | ## Full example 48 | 49 | <CodeBlock className="language-d2" layout="elk"> 50 | {Classes3} 51 | </CodeBlock> 52 | 53 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/classes-3.svg2')}}></div> 54 | -------------------------------------------------------------------------------- /docs/tour/vim.md: -------------------------------------------------------------------------------- 1 | # Vim plugin 2 | 3 | D2 has an official, creator-maintained plugin for Vim. You can use any plugin manager to 4 | include `terrastruct/d2-vim`. For example: 5 | 6 | ``` 7 | Plug 'terrastruct/d2-vim' 8 | ``` 9 | 10 | Automatic indentation and syntax highlighting are fully supported and make working with 11 | the D2 language far more pleasant. Autoformat on each save is planned. 12 | 13 | The syntax highlighting will even catch basic errors for you if your color theme 14 | highlights illegal syntax. 15 | 16 | **Github:** 17 | [https://github.com/terrastruct/d2-vim](https://github.com/terrastruct/d2-vim) 18 | -------------------------------------------------------------------------------- /docs/tour/vscode.md: -------------------------------------------------------------------------------- 1 | --- 2 | pagination_next: tour/vim 3 | --- 4 | # VSCode extension 5 | 6 | D2 has an official, creator-maintained extension for VSCode. It's searchable and 7 | downloadable through the VSCode marketplace for free. 8 | 9 | Automatic indentation and syntax highlighting are fully supported and make working with 10 | the D2 language far more pleasant. Split-screen diagramming within VSCode is planned. 11 | 12 | The syntax highlighting will even catch basic errors for you if your color theme 13 | highlights illegal syntax. 14 | 15 | **Github:** 16 | [https://github.com/terrastruct/d2-vscode](https://github.com/terrastruct/d2-vscode) 17 | 18 | -------------------------------------------------------------------------------- /i18n/ko/docusaurus-plugin-content-docs/current/tour/community.md: -------------------------------------------------------------------------------- 1 | # 커뮤니티 2 | 3 | - 질문이나 도움이 필요한 경우 [Discord 채널](https://discord.gg/NF6X8K4eDq)을 통해 빠르게 답변을 받으실 수 있습니다. 4 | - 제안, 버그 발생 또는 팀 및 커뮤니티와 논의하고 싶은 사항이 있으신가요? D2는 [GitHub Issues](https://github.com/terrastruct/d2/issues)를 사용하여 이슈들을 관리하고 있으며, [GitHub Discussions](https://github.com/terrastruct/d2/discussions)으로 기능 요청 및 아이디어를 확인하고 있습니다. 5 | - 개인적인 문의사항이 있으신 경우 hi@d2lang.com으로 이메일을 보내주세요. 6 | -------------------------------------------------------------------------------- /i18n/ko/docusaurus-plugin-content-docs/current/tour/design.md: -------------------------------------------------------------------------------- 1 | # 설계 방안 2 | 3 | 다음은 D2의 개발 방향에 대해 설명하는 설계 방안입니다. 4 | 우리는 과거의 실수를 피하고 가장 성공적인 현대 프로그래밍 언어에서 영감을 얻기 위해 최선을 다했습니다. 5 | 6 | D2의 설계 방안은 본질적으로 절충안에 가깝습니다. 7 | 따라서 이들 중 일부는 당신이 동의하지 못할 수 있습니다. 8 | 그러나 만약 당신이 프로그래머라면, D2는 당신을 위해 만들어진 것이며, 저희는 이러한 결정들이 모여 당신이 편안하게 느낄 수 있는 언어를 만들었다고 믿습니다. 9 | 10 | 언어가 계속 발전함에 따라 이러한 것들도 필연적으로 발전할 것입니다. 11 | 12 | ## 가독성 > 프로토타입 개발 속도 13 | 14 | 가독성과 프로토타입 개발 속도 모두 중요하지만 둘 중 하나를 택해야 할 경우 D2는 일반적으로 가독성을 선호합니다. 15 | 16 | 대부분의 경우 둘 중 하나를 택해야 하는 경우는 없습니다. 17 | 좋은 프로그래밍 언어는 일반적으로 두가지 모두를 택할 수 있도록 합니다. 18 | D2의 문법은 가벼우며, 자동 포맷터가 항상 정확하게 사용되도록 설계되어 프로젝트 간에 일관성을 유지하도록 합니다. 19 | 20 | 사용 편의성, 프로토타입 개발 속도, 가독성 사이에서 적절한 균형을 찾으시길 바랍니다. 21 | D2는 특히 위의 세가지를 모두 무시하는 명료하지 않고 간결한 구문의 사용을 피하고 있습니다. 22 | 23 | 예를 들어 원통 모양을 정의하는 두 가지 방법이 있습니다. 24 | 25 | D2: 26 | 27 | ```d2 28 | A: Christmas {shape: cylinder} 29 | ``` 30 | 31 | Mermaid: 32 | 33 | ``` 34 | A[(Christmas)] 35 | ``` 36 | 37 | D2는 덜 간결하지만 훨씬 더 읽기 쉽습니다. 38 | 39 | ## 경고 > 에러 40 | 41 | D2는 가능할 때마다 컴파일합니다. 42 | 예를 들어, 존재하지 않는 클래스를 적용하거나 특정 모양에 영향을 주지 않는 스타일을 추가한다고 가정해 보겠습니다. 43 | 사용자 오류가 D2가 무시할 수 있는 오류인 경우 성공적으로 컴파일되고 최대 경고만 표시됩니다. 44 | 디버깅하는 동안 일부 코드를 주석 처리하고 사용되지 않은 변수가 있다는 뜻밖의 오류 메시지를 받는 것보다 더 짜증나는 일은 없습니다. 45 | 46 | ## 좋은 기본 설정 47 | 48 | D2의 기본 설정, 즉 사용자가 아무것도 변경하지 않았을 때는 좋은 다이어그램을 생성해야 합니다. 49 | 이를 위해서는 어떤 기본 설정이 좋은지에 대해 명확한 견해를 가져야 합니다. 50 | 예를 들어, D2는 단색이 아닌 쾌적한 색상이 기본 테마으로 제공됩니다. 51 | 52 | ## 데스크톱 및 서버용을 위한 최적화 53 | 54 | D2는 감시 모드가 내장되어 있고, 매뉴얼 페이지가 유지 관리되며, 표준 입력(stdin)에서 읽고 표준 출력(stdout)으로 쓰는 기능을 지원하는 강력한 CLI를 갖추고 있습니다. 55 | 이미지와 글꼴은 기본적으로 다이어그램에 포함되므로 내보내기(exported) 된 다이어그램은 독립형 다이어그램으로 어디에서나 동일하게 보입니다. 56 | D2는 PPT 및 GIF와 같은 다양한 형식을 지원하며 모듈화를 위해 다이어그램을 여러 파일로 나눌 수 있는 가져오기(import) 기능을 제공합니다. 57 | 프로그래밍적으로 D2를 편집하고 작성할 수 있는 언어 API도 있습니다. 58 | 이 모든 것은 브라우저 렌더링을 위한 웹 라이브러리와는 반대되는 개념입니다 59 | D2는 이러한 용도의 웹 라이브러리를 제공하고 유지 관리할 계획이지만, 이는 후순위이기 때문에 전체 기능에서 간소화할 예정입니다. 60 | -------------------------------------------------------------------------------- /i18n/ko/docusaurus-plugin-content-docs/current/tour/experience.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_label: 개발 툴 vs 디자인 툴 3 | --- 4 | 5 | # 다이어그램 개발툴 6 | 7 | D2는 **"개발자가 다이어그램 작성을 즐겁게 할 수 있게 하자"**라는 단 하나의 목표를 가지고 설계되었습니다. 8 | 간단한 다이어그램을 그릴 경우에 이런 점을 만족시킬 수 있는 툴들은 많지만, 그러한 툴들은 다이어그램이 조금만 복잡해지는 순간 그럴 수 없게 됩니다. 9 | 10 | 왜 그럴까요? 11 | 오늘날 대부분의 다이어그램 작성 툴들은 개발이 아닌 디자인을 위한 툴이기 때문입니다. 12 | Figma나 Photoshop에서 볼 수 있는 것처럼, 그 툴들은 빈 캔버스와 작업용 툴바를 제공하여 실행해야할 작업을 디자인 프로세스로 취급합니다. 13 | 엔지니어는 비주얼 디자이너가 아니며, 시스템을 공간적으로 설계하는 능력이 부족하다고 해서 귀중한 문서 작성이 방해되어서는 안 됩니다. 14 | 모든 드래그와 드롭에는 계획이 필요하지 않아야 할 것이며, 업데이트는 새 항목을 위한 공간을 확보하기 위해 항목을 이동하고 크기를 조절해야 하는 귀찮은 작업이 되어서는 안 됩니다. 15 | D2에서는 이러한 잔업들을 배제합니다. 16 | 17 | Hashicorp가 Terraform을 도입하여 엔지니어가 인프라를 텍스트로 작성할 수 있도록 하기 전에는 AWS 및 Google Cloud 콘솔을 클릭하여 인프라를 구성했습니다. 18 | 오늘날, 그런 방식은 전혀 전문적이지 않습니다. 19 | 그런 방식으로 검토 프로세스, 롤백 단계, 기록 및 버전 관리는 어떻게 할 수 있을까요? 20 | 또한, 시간이 지날수록 세계적인 기업들은 시각적 문서를 디자인 툴로 만들지는 않을 것입니다. 21 | -------------------------------------------------------------------------------- /i18n/ko/docusaurus-plugin-content-docs/current/tour/hello-world.md: -------------------------------------------------------------------------------- 1 | --- 2 | pagination_next: tour/shapes 3 | --- 4 | 5 | import CodeBlock from '@theme/CodeBlock'; 6 | import HelloWorld from '@site/static/d2/hello-world.d2'; 7 | 8 | # Hello World 9 | 10 | ```d2 11 | x -> y: hello world 12 | ``` 13 | 14 | <div 15 | className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/hello-world.svg2')}}></div> 16 | 17 | 위 명령문으로 두 셰이프 `x`와 `y`를 `hello world`라는 라벨과 함께 연결할 수 있습니다. 18 | -------------------------------------------------------------------------------- /i18n/ko/docusaurus-plugin-content-docs/current/tour/install.md: -------------------------------------------------------------------------------- 1 | --- 2 | pagination_next: tour/hello-world 3 | --- 4 | 5 | # 설치하기 6 | 7 | :::tip 8 | [여기](https://github.com/terrastruct/d2/blob/master/docs/INSTALL.md)에 Mac, Windows 및 Linux에서의 다양하고 자세한 설치 지침이 있습니다. 9 | 이 페이지는 그에 대한 요약 버전입니다. 10 | ::: 11 | 12 | ## 스크립트로 설치하기 13 | 14 | 권장되는 설치 방법은 설치 스크립트를 실행해 설치하는 것입니다. 15 | 이 스크립트는 당신의 기기에서 가장 적합한 설치 방법을 찾아낼 것입니다. 16 | 예를 들어 기기에 설치된 패키지 관리자를 통해 D2를 사용할 수 있는 경우, 해당 패키지 관리자를 사용합니다. 17 | 18 | ```shell 19 | # With --dry-run the install script will print the commands it will use 20 | # to install without actually installing so you know what it's going to do. 21 | curl -fsSL https://d2lang.com/install.sh | sh -s -- --dry-run 22 | # If things look good, install for real. 23 | curl -fsSL https://d2lang.com/install.sh | sh -s -- 24 | ``` 25 | 26 | 지침에 안내된 내용을 따라주세요. 27 | 지침을 따라 설치를 완료했다면 `d2 version`을 실행하여 설치가 성공적이었는지 테스트해주세요. 28 | 29 | 제거를 원하는 경우: 30 | 31 | ```shell 32 | curl -fsSL https://d2lang.com/install.sh | sh -s -- --uninstall 33 | ``` 34 | 35 | ## 소스 파일로 설치하기 36 | 37 | 소스 파일로 설치할 수도 있습니다. 38 | 39 | ```shell 40 | go install oss.terrastruct.com/d2 41 | ``` 42 | 43 | :::info 44 | [Github 릴리스 페이지](https://github.com/terrastruct/d2/releases)에서 OS에 맞게 미리 컴파일된 바이너리 파일을 다운로드할 수도 있습니다. 45 | ::: 46 | 47 | # 사용해보기 48 | 49 | ```shell 50 | echo 'x -> y' > input.d2 51 | d2 -w input.d2 out.svg 52 | ``` 53 | 54 | `input.d2`를 변경할 때마다 자동으로 새로고침되는 로컬 웹 브라우저가 실행되어야 합니다. 이제 가이드를 따라가면서 `input.d2`를 수정해보세요. 55 | -------------------------------------------------------------------------------- /i18n/ko/docusaurus-plugin-content-docs/current/tour/shapes.md: -------------------------------------------------------------------------------- 1 | import CodeBlock from '@theme/CodeBlock'; 2 | import Shapes1 from '@site/static/d2/shapes-1.d2'; 3 | import Shapes2 from '@site/static/d2/shapes-2.d2'; 4 | 5 | # 도형(Shape) 6 | 7 | ## 기본 8 | 9 | 다음과 같이 도형을 선언할 수 있습니다. 10 | 11 | ```d2 12 | imAShape 13 | im_a_shape 14 | im a shape 15 | i'm a shape 16 | # 하이픈 한개로는 연결이 생성되지 않으므로 도형 작명 시 사용 가능 17 | # `a--shape`와 같이 하이픈 2개 사용 시 연결이 생성되므로 주의할 것 18 | a-shape 19 | ``` 20 | 21 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/shapes-1.svg2')}}></div> 22 | 23 | 세미콜론을 사용하여 같은 줄에 여러 도형을 정의할 수도 있습니다. 24 | 25 | ```d2 26 | SQLite; Cassandra 27 | ``` 28 | 29 | 기본적으로 도형의 레이블은 도형의 키와 동일합니다. 30 | 그러나 레이블을 따로 지정하고 싶다면 다음과 같이 새 레이블을 지정하세요. 31 | 32 | ```d2 33 | pg: PostgreSQL 34 | ``` 35 | 36 | 도형의 기본 타입은 `rectangle`(직사각형)입니다. 37 | 타입을 바꾸고 싶다면 `shape` 속성을 사용할 수 있습니다. 38 | 39 | ```d2 40 | Cloud: my cloud 41 | Cloud.shape: cloud 42 | ``` 43 | 44 | ## 예시 45 | 46 | ```d2 47 | pg: PostgreSQL 48 | Cloud: my cloud 49 | Cloud.shape: cloud 50 | SQLite; Cassandra 51 | ``` 52 | 53 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/shapes-2.svg2')}}></div> 54 | 55 | :::info 56 | 키는 대소문자를 구분하지 않습니다. 57 | 따라서 `postgresql`과 `postgreSQL`은 동일한 도형을 가리킵니다. 58 | ::: 59 | 60 | :::info 도형 카탈로그 61 | 62 | <div className="embedSVG overflow" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/shapes-3.svg2')}}></div> 63 | 64 | `shape` 속성이 ​​취할 수 있는 다른 특수한 타입들이 더 있지만, 그건 다음 섹션에서 다루도록 하겠습니다. 65 | ::: 66 | -------------------------------------------------------------------------------- /i18n/ko/docusaurus-plugin-content-docs/current/tour/uml-classes.md: -------------------------------------------------------------------------------- 1 | import CodeBlock from '@theme/CodeBlock'; 2 | import Classes1 from '@site/static/d2/classes-1.d2'; 3 | import Classes2 from '@site/static/d2/classes-2.d2'; 4 | 5 | # UML 클래스 6 | 7 | ## 기본 8 | 9 | D2는 UML 클래스 다이어그램을 완벽하게 지원합니다. 10 | 다음은 기본적인 예시입니다. 11 | 12 | ```d2 13 | MyClass: { 14 | shape: class 15 | 16 | field: "[]string" 17 | method(a uint64): (x, y int) 18 | } 19 | ``` 20 | 21 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/classes-1.svg2')}}></div> 22 | 23 | `class` 도형의 각 키들은 필드 또는 메서드를 정의합니다. 24 | 25 | 필드 키의 값은 필드의 타입을 의미합니다. 26 | 27 | `(`를 포함하는 모든 키는 메서드이며, 값은 반환값의 타입을 의미합니다. 28 | 29 | 값이 없는 메소드 키의 반환 타입은 void입니다. 30 | 31 | ## 가시성(Visibility) 32 | 33 | UML 스타일의 접근 제어자를 사용하여 필드/메서드에 대한 가시성을 나타낼 수도 있습니다. 34 | 35 | | 가시성 접근 제어자 | 의미 | 36 | | :----------------: | :-------: | 37 | | none | public | 38 | | + | public | 39 | | - | private | 40 | | # | protected | 41 | 42 | https://www.uml-diagrams.org/visibility.html을 참조하세요. 43 | 44 | 다음은 다양한 가시성과 더 복잡한 타입들에 대한 예시입니다. 45 | 46 | ```d2 47 | D2 Parser: { 48 | shape: class 49 | 50 | # 기본 가시성은 + 이므로 명시하지 않아도 됩니다. 51 | +reader: io.RuneReader 52 | readerPos: d2ast.Position 53 | 54 | # Private field. 55 | -lookahead: "[]rune" 56 | 57 | # Protected field. 58 | # 해당 행이 주석으로 구문 분석되는 것을 방지하려면 #를 탈출문자로 처리해야 합니다. 59 | \#lookaheadPos: d2ast.Position 60 | 61 | +peek(): (r rune, eof bool) 62 | rewind() 63 | commit() 64 | 65 | \#peekn(n int): (s string, eof bool) 66 | } 67 | 68 | "github.com/terrastruct/d2parser.git" -> D2 Parser 69 | ``` 70 | 71 | <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/classes-2.svg2')}}></div> 72 | -------------------------------------------------------------------------------- /i18n/zh-cn/docusaurus-plugin-content-docs/current/tour/cheat-sheet.md: -------------------------------------------------------------------------------- 1 | # 速查表 2 | 3 | 点击此预览以下载 PDF 文件。 4 | 5 | <a href="https://terrastruct-site-assets.s3.us-west-1.amazonaws.com/documents/d2_cheat_sheet.pdf"> 6 | <img src={require('@site/static/img/screenshots/cheatsheet.png').default} alt="d2 速查表" style={{width:'600px'}}/> 7 | </a> 8 | -------------------------------------------------------------------------------- /i18n/zh-cn/docusaurus-plugin-content-docs/current/tour/comments.md: -------------------------------------------------------------------------------- 1 | # 注释 2 | 3 | D2 语言支持行注释和块注释。 4 | 5 | ## 行注释 6 | 7 | 行注释以井号（`#`）开头。 8 | 9 | 它们可以单独成行： 10 | 11 | ```d2 12 | # 注释以井号开头，直至遇到换行符或 EOF。 13 | x -> y 14 | ``` 15 | 16 | 也可以放在一行的末尾： 17 | 18 | ```d2 19 | x -> y # 我在行尾 20 | ``` 21 | 22 | ## 块注释 23 | 24 | 块注释以三个双引号（`"""`）开头和结尾： 25 | 26 | ```d2 27 | x -> y 28 | 29 | """ 30 | 这是一个 31 | 块注释 32 | """ 33 | 34 | y -> z 35 | ``` 36 | -------------------------------------------------------------------------------- /i18n/zh-cn/docusaurus-plugin-content-docs/current/tour/hello-world.md: -------------------------------------------------------------------------------- 1 | --- 2 | pagination_next: tour/shapes 3 | --- 4 | import CodeBlock from '@theme/CodeBlock'; 5 | import HelloWorld from '@site/static/d2/hello-world.d2'; 6 | 7 | # Hello World 8 | 9 | <CodeBlock className="language-d2"> 10 | {HelloWorld} 11 | </CodeBlock> 12 | 13 | <div 14 | className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/hello-world.svg2')}}></div> 15 | 16 | 这里声明了两个形状 `x` 和 `y` 之间的连接，并带有标签 `hello world`。 17 | -------------------------------------------------------------------------------- /make.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | set -eu 3 | if [ ! -e "$(dirname "$0")/ci/sub/.git" -o \ 4 | ! -e "$(dirname "$0")/src/d2-vscode/.git" ]; then 5 | set -x 6 | git submodule update --init 7 | set +x 8 | fi 9 | . "$(dirname "$0")/ci/sub/lib.sh" 10 | PATH="$(cd -- "$(dirname "$0")" && pwd)/ci/sub/bin:$PATH" 11 | cd "$(dirname "$0")" 12 | 13 | _make "$@" 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "engines": { 3 | "node": ">=16.14.0 <22.7.0 || >=22.8.0" 4 | }, 5 | "private": true, 6 | "scripts": { 7 | "dev": "docusaurus start --port 8888", 8 | "prod-serve": "yarn run prod && yarn run serve", 9 | "serve": "docusaurus serve --port 8899", 10 | "prod": "docusaurus build", 11 | "clear": "docusaurus clear", 12 | "swizzle": "docusaurus swizzle", 13 | "write-translations": "docusaurus write-translations" 14 | }, 15 | "dependencies": { 16 | "@docusaurus/core": "^2.4.3", 17 | "@docusaurus/plugin-client-redirects": "^2.4.3", 18 | "@docusaurus/preset-classic": "^2.4.3", 19 | "@mdx-js/react": "^1.6.22", 20 | "clsx": "^1.1.1", 21 | "docusaurus-plugin-sass": "^0.2.3", 22 | "pako": "^2.1.0", 23 | "prettier": "^2.7.1", 24 | "prism-react-renderer": "^1.3.1", 25 | "react": "^17.0.2", 26 | "react-dom": "^17.0.2", 27 | "sass": "^1.60.0", 28 | "shiki": "^0.10.1", 29 | "vscode-oniguruma": "^1.6.2", 30 | "vscode-textmate": "^7.0.1" 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.5%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/components/Directory/GetInvolved/GetInvolved.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "./GetInvolved.scss"; 4 | 5 | const InvolvedItem = (props) => { 6 | return ( 7 | <div key={props.title} className="GetInvolved__Item"> 8 | <span className="GetInvolved__Item--Title">{props.title}</span> 9 | <span className="GetInvolved__Item--Description">{props.description}</span> 10 | <span 11 | className="GetInvolved__Item--CTA" 12 | onClick={() => { 13 | window.location.href = props.href; 14 | }} 15 | > 16 | {props.cta} 17 | </span> 18 | <div className="GetInvolved__Item--Right"> 19 | <img 20 | className="GetInvolved__Item--Image" 21 | src={require("@site/static/features/icons/" + props.img).default} 22 | /> 23 | </div> 24 | </div> 25 | ); 26 | }; 27 | 28 | export const GetInvolved = () => { 29 | return ( 30 | <div className="GetInvolved"> 31 | <InvolvedItem 32 | title="Chat on Discord" 33 | description="Hangout, talk about diagrams, get help, give feedback and see early previews of what's coming next." 34 | cta="Go to Discord" 35 | img="discord.svg" 36 | href="https://discord.com/invite/pbUXgvmTpU" 37 | /> 38 | <InvolvedItem 39 | title="Check out our blog" 40 | description="Technical blog posts from the authors of D2 on a variety of topics from feature deep dives to how things were built." 41 | cta="Go to blog" 42 | img="blog.svg" 43 | href="/blog" 44 | /> 45 | </div> 46 | ); 47 | }; 48 | 49 | export default GetInvolved; 50 | -------------------------------------------------------------------------------- /src/components/Features/Features.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "./Features.scss"; 4 | 5 | export const Features = (props) => { 6 | const renderFeatureImage = (feature) => { 7 | if (!feature.img) { 8 | return null; 9 | } 10 | return ( 11 | <div className="Features__Item--Top"> 12 | <div className="Features__Item--ImageContainer"> 13 | {!feature.img.endsWith("png") && ( 14 | <div 15 | className="Features__Item--Image" 16 | dangerouslySetInnerHTML={{ __html: feature.img }} 17 | ></div> 18 | )} 19 | {feature.img.endsWith("png") && ( 20 | <img className="Features__Item--Image" src={feature.img} /> 21 | )} 22 | </div> 23 | </div> 24 | ); 25 | }; 26 | 27 | return ( 28 | <div className="Features"> 29 | {props.features.map((feature) => { 30 | return ( 31 | <div 32 | key={feature.title} 33 | className="Features__Item" 34 | onClick={() => { 35 | if (!feature.href) { 36 | return; 37 | } 38 | window.location.href = feature.href; 39 | }} 40 | > 41 | {renderFeatureImage(feature)} 42 | <div key={feature.title} className="Features__Item--Bottom"> 43 | {feature.icon && ( 44 | <img 45 | className="Features__Item--Icon" 46 | src={require("@site/static/features/icons/" + feature.icon).default} 47 | /> 48 | )} 49 | <span className="Features__Item--Title">{feature.title}</span> 50 | <span className="Features__Item--Description">{feature.description}</span> 51 | </div> 52 | </div> 53 | ); 54 | })} 55 | </div> 56 | ); 57 | }; 58 | 59 | export default Features; 60 | -------------------------------------------------------------------------------- /src/styles/sidebar.scss: -------------------------------------------------------------------------------- 1 | #__docusaurus { 2 | .theme-doc-sidebar-item-category-level-1 { 3 | font-weight: 600; 4 | } 5 | 6 | .theme-doc-sidebar-item-link-level-2 { 7 | font-weight: 400; 8 | } 9 | 10 | .menu__caret:before { 11 | background-size: 1.25rem; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/theme/BlogSidebar/Desktop/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import clsx from "clsx"; 3 | import Link from "@docusaurus/Link"; 4 | import { translate } from "@docusaurus/Translate"; 5 | import styles from "./styles.module.css"; 6 | import RSSIcon from "@site/static/img/rss.svg"; 7 | 8 | export default function BlogSidebarDesktop({ sidebar }) { 9 | return ( 10 | <aside className="col col--3"> 11 | <nav 12 | className={clsx(styles.sidebar, "thin-scrollbar")} 13 | aria-label={translate({ 14 | id: "theme.blog.sidebar.navAriaLabel", 15 | message: "Blog recent posts navigation", 16 | description: "The ARIA label for recent posts in the blog sidebar", 17 | })} 18 | > 19 | <div className={clsx(styles.sidebarItemTitle, "margin-bottom--md")}> 20 | {sidebar.title} 21 | <button 22 | className={styles.sidebarRSS} 23 | onClick={() => window.open("/blog/rss.xml")} 24 | > 25 | RSS <RSSIcon /> 26 | </button> 27 | </div> 28 | <ul className={clsx(styles.sidebarItemList, "clean-list")}> 29 | {sidebar.items.map((item) => ( 30 | <li key={item.permalink} className={styles.sidebarItem}> 31 | <Link 32 | isNavLink 33 | to={item.permalink} 34 | className={styles.sidebarItemLink} 35 | activeClassName={styles.sidebarItemLinkActive} 36 | > 37 | {item.title} 38 | </Link> 39 | </li> 40 | ))} 41 | </ul> 42 | </nav> 43 | </aside> 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /src/theme/BlogSidebar/Desktop/styles.module.css: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem)); 3 | overflow-y: auto; 4 | position: sticky; 5 | top: calc(var(--ifm-navbar-height) + 2rem); 6 | } 7 | 8 | .sidebarItemTitle { 9 | font-size: var(--ifm-h3-font-size); 10 | font-weight: var(--ifm-font-weight-bold); 11 | display: flex; 12 | align-items: center; 13 | justify-content: space-between; 14 | gap: 0.5rem; 15 | } 16 | 17 | .sidebarItemList { 18 | font-size: 0.9rem; 19 | } 20 | 21 | .sidebarItem { 22 | margin-top: 0.7rem; 23 | } 24 | 25 | .sidebarItemLink { 26 | color: var(--ifm-font-color-base); 27 | display: block; 28 | } 29 | 30 | .sidebarItemLink:hover { 31 | text-decoration: none; 32 | } 33 | 34 | .sidebarItemLinkActive { 35 | color: var(--ifm-color-primary) !important; 36 | } 37 | 38 | .sidebarRSS { 39 | display: flex; 40 | align-items: center; 41 | gap: 0.2rem; 42 | border: 1px solid var(--border); 43 | background: transparent; 44 | border-radius: 4px; 45 | height: 1.5rem; 46 | font-size: 12px; 47 | cursor: pointer; 48 | } 49 | 50 | .sidebarRSS:hover { 51 | background: var(--button-hover); 52 | } 53 | 54 | .sidebarRSS svg { 55 | filter: var(--icon-filter); 56 | } 57 | 58 | @media (max-width: 996px) { 59 | .sidebar { 60 | display: none; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/theme/BlogSidebar/Mobile/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "@docusaurus/Link"; 3 | import { NavbarSecondaryMenuFiller } from "@docusaurus/theme-common"; 4 | import styles from "./styles.module.css"; 5 | import RSSIcon from "@site/static/img/rss.svg"; 6 | 7 | function BlogSidebarMobileSecondaryMenu({ sidebar }) { 8 | return ( 9 | <ul className="menu__list"> 10 | {sidebar.items.map((item) => ( 11 | <li key={item.permalink} className="menu__list-item"> 12 | <Link 13 | isNavLink 14 | to={item.permalink} 15 | className="menu__link" 16 | activeClassName="menu__link--active" 17 | > 18 | {item.title} 19 | </Link> 20 | </li> 21 | ))} 22 | <button className={styles.sidebarRSS} onClick={() => window.open("/blog/rss.xml")}> 23 | RSS <RSSIcon /> 24 | </button> 25 | </ul> 26 | ); 27 | } 28 | export default function BlogSidebarMobile(props) { 29 | return ( 30 | <NavbarSecondaryMenuFiller component={BlogSidebarMobileSecondaryMenu} props={props} /> 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /src/theme/BlogSidebar/Mobile/styles.module.css: -------------------------------------------------------------------------------- 1 | .sidebarRSS { 2 | display: flex; 3 | align-items: center; 4 | gap: 0.2rem; 5 | border: 1px solid var(--border); 6 | background: transparent; 7 | border-radius: 4px; 8 | height: 1.5rem; 9 | font-size: 12px; 10 | cursor: pointer; 11 | margin-left: var(--ifm-menu-link-padding-horizontal); 12 | margin-top: var(--ifm-menu-link-padding-vertical); 13 | } 14 | 15 | .sidebarRSS:hover { 16 | background: var(--button-hover); 17 | } 18 | 19 | .sidebarRSS svg { 20 | filter: var(--icon-filter); 21 | } 22 | -------------------------------------------------------------------------------- /src/theme/BlogSidebar/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useWindowSize } from "@docusaurus/theme-common"; 3 | import BlogSidebarDesktop from "@theme/BlogSidebar/Desktop"; 4 | import BlogSidebarMobile from "@theme/BlogSidebar/Mobile"; 5 | export default function BlogSidebar({ sidebar }) { 6 | const windowSize = useWindowSize(); 7 | if (!sidebar?.items.length) { 8 | return null; 9 | } 10 | // Mobile sidebar doesn't need to be server-rendered 11 | if (windowSize === "mobile") { 12 | return <BlogSidebarMobile sidebar={sidebar} />; 13 | } 14 | return <BlogSidebarDesktop sidebar={sidebar} />; 15 | } 16 | -------------------------------------------------------------------------------- /src/theme/CodeBlock/metadata-consts.js: -------------------------------------------------------------------------------- 1 | // From vscTextMate.MetadataConsts 2 | // Cannot import as vscTextMate.MetadataConsts because we're not using Typescript. 3 | // vscTextMate.MetadataConsts is a Typescript enum and so it's stripped from the final 4 | // build. 5 | export default { 6 | LANGUAGEID_MASK: 0b00000000000000000000000011111111, 7 | TOKEN_TYPE_MASK: 0b00000000000000000000001100000000, 8 | BALANCED_BRACKETS_MASK: 0b00000000000000000000010000000000, 9 | FONT_STYLE_MASK: 0b00000000000000000111100000000000, 10 | FOREGROUND_MASK: 0b00000000111111111000000000000000, 11 | BACKGROUND_MASK: 0b11111111000000000000000000000000, 12 | 13 | LANGUAGEID_OFFSET: 0, 14 | TOKEN_TYPE_OFFSET: 8, 15 | BALANCED_BRACKETS_OFFSET: 10, 16 | FONT_STYLE_OFFSET: 11, 17 | FOREGROUND_OFFSET: 15, 18 | BACKGROUND_OFFSET: 24, 19 | }; 20 | -------------------------------------------------------------------------------- /src/theme/Footer/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useThemeConfig } from "@docusaurus/theme-common"; 3 | import { splitNavbarItems } from "@docusaurus/theme-common/internal"; 4 | 5 | import SearchBar from "@theme/SearchBar"; 6 | import NavbarItem from "@theme/NavbarItem"; 7 | 8 | import "./footer.scss"; 9 | 10 | function Footer() { 11 | const navbarItems = useThemeConfig().navbar.items; 12 | const [links, rightItems] = splitNavbarItems(navbarItems); 13 | 14 | const icons = rightItems.filter((i) => i.type === "custom-iconLink"); 15 | const playground = rightItems.find((i) => i.label === "Playground"); 16 | return ( 17 | <footer className="Footer"> 18 | <div className="Footer--Top"> 19 | <img className="Footer__Logo" src="/img/d2_logo.png" /> 20 | <div className="Footer__Mobile"> 21 | <div className="Footer__Mobile--Icons"> 22 | {icons.map((item, i) => ( 23 | <NavbarItem key={i} {...item} /> 24 | ))} 25 | </div> 26 | </div> 27 | </div> 28 | <div className="Footer__Right"> 29 | <a className="Footer__Link" href="https://terrastruct.com"> 30 | <span> 31 | Created by <img src="/img/terrastruct_logo.svg" /> 32 | </span> 33 | </a> 34 | |<span>© 2025 Terrastruct, Inc.</span> 35 | </div> 36 | <div className="Footer__Mobile"> 37 | <div className="Footer__Mobile--Bar"> 38 | <div className="Footer__Mobile--Bottom"> 39 | <div className="Footer__Mobile--Links"> 40 | {links.map((item, i) => ( 41 | <NavbarItem key={i} {...item} /> 42 | ))} 43 | </div> 44 | <NavbarItem {...playground} className="Footer__Mobile--Playground" /> 45 | </div> 46 | </div> 47 | </div> 48 | </footer> 49 | ); 50 | } 51 | export default React.memo(Footer); 52 | -------------------------------------------------------------------------------- /src/theme/NavbarItem/ComponentTypes.js: -------------------------------------------------------------------------------- 1 | import DefaultNavbarItem from "@theme/NavbarItem/DefaultNavbarItem"; 2 | import DropdownNavbarItem from "@theme/NavbarItem/DropdownNavbarItem"; 3 | import LocaleDropdownNavbarItem from "@theme/NavbarItem/LocaleDropdownNavbarItem"; 4 | import SearchNavbarItem from "@theme/NavbarItem/SearchNavbarItem"; 5 | import HtmlNavbarItem from "@theme/NavbarItem/HtmlNavbarItem"; 6 | import DocNavbarItem from "@theme/NavbarItem/DocNavbarItem"; 7 | import DocSidebarNavbarItem from "@theme/NavbarItem/DocSidebarNavbarItem"; 8 | import DocsVersionNavbarItem from "@theme/NavbarItem/DocsVersionNavbarItem"; 9 | import DocsVersionDropdownNavbarItem from "@theme/NavbarItem/DocsVersionDropdownNavbarItem"; 10 | import NavbarIconLink from "@theme/NavbarItem/NavbarIconLink"; 11 | const ComponentTypes = { 12 | default: DefaultNavbarItem, 13 | localeDropdown: LocaleDropdownNavbarItem, 14 | search: SearchNavbarItem, 15 | dropdown: DropdownNavbarItem, 16 | html: HtmlNavbarItem, 17 | doc: DocNavbarItem, 18 | docSidebar: DocSidebarNavbarItem, 19 | docsVersion: DocsVersionNavbarItem, 20 | docsVersionDropdown: DocsVersionDropdownNavbarItem, 21 | "custom-iconLink": NavbarIconLink, 22 | }; 23 | export default ComponentTypes; 24 | -------------------------------------------------------------------------------- /src/theme/NavbarItem/NavbarIconLink.jsx: -------------------------------------------------------------------------------- 1 | import useBaseUrl from "@docusaurus/useBaseUrl"; 2 | import clsx from "clsx"; 3 | import React from "react"; 4 | 5 | export default function NavbarIconLink({ icon, ...props }) { 6 | const { alt, href, src, target, width, height } = icon; 7 | 8 | return ( 9 | <a 10 | {...props} 11 | className={clsx(props.className, "icon-link", "navbar__item")} 12 | href={useBaseUrl(href)} 13 | target={target} 14 | > 15 | <img src={useBaseUrl(src)} width={width} height={height} alt={alt} /> 16 | </a> 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /src/theme/NavbarItem/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import NavbarItem from "@theme-original/NavbarItem"; 4 | import NavbarIconLink from "@theme/NavbarItem/NavbarIconLink"; 5 | 6 | const CustomNavbarItemComponents = { 7 | "custom-iconLink": () => NavbarIconLink, 8 | }; 9 | 10 | export default function NavbarItemWrapper(props) { 11 | if (Object.keys(CustomNavbarItemComponents).includes(props.type)) { 12 | const Component = CustomNavbarItemComponents[props.type](); 13 | return <Component {...props} />; 14 | } else { 15 | return <NavbarItem {...props} />; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/theme/TOC/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import clsx from "clsx"; 3 | import TOCItems from "@theme/TOCItems"; 4 | import styles from "./styles.module.css"; 5 | // Using a custom className 6 | // This prevents TOCInline/TOCCollapsible getting highlighted by mistake 7 | const LINK_CLASS_NAME = "table-of-contents__link toc-highlight"; 8 | const LINK_ACTIVE_CLASS_NAME = "table-of-contents__link--active"; 9 | export default function TOC({ className, ...props }) { 10 | return ( 11 | <div className={clsx(styles.tableOfContents, "thin-scrollbar", className)}> 12 | <div className={styles.tableOfContentsHeader}>Contents</div> 13 | <TOCItems 14 | {...props} 15 | linkClassName={LINK_CLASS_NAME} 16 | linkActiveClassName={LINK_ACTIVE_CLASS_NAME} 17 | /> 18 | </div> 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /src/theme/TOC/styles.module.css: -------------------------------------------------------------------------------- 1 | .tableOfContents { 2 | max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem)); 3 | overflow-y: auto; 4 | position: sticky; 5 | top: calc(var(--ifm-navbar-height) + 1rem); 6 | border: 1px solid var(--border); 7 | border-radius: 4px; 8 | padding: 0.5rem; 9 | } 10 | 11 | .tableOfContentsHeader { 12 | font-weight: 600; 13 | margin-left: 0.25rem; 14 | color: var(--ifm-font-color-base); 15 | } 16 | 17 | @media (max-width: 996px) { 18 | .tableOfContents { 19 | display: none; 20 | } 21 | 22 | .docItemContainer { 23 | padding: 0 0.3rem; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/theme/TOCCollapsible/CollapseButton/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import clsx from "clsx"; 3 | import styles from "./styles.module.css"; 4 | export default function TOCCollapsibleCollapseButton({ collapsed, ...props }) { 5 | return ( 6 | <button 7 | type="button" 8 | {...props} 9 | className={clsx( 10 | "clean-btn", 11 | styles.tocCollapsibleButton, 12 | !collapsed && styles.tocCollapsibleButtonExpanded, 13 | props.className 14 | )} 15 | > 16 | Contents 17 | </button> 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /src/theme/TOCCollapsible/CollapseButton/styles.module.css: -------------------------------------------------------------------------------- 1 | .tocCollapsibleButton { 2 | font-size: inherit; 3 | display: flex; 4 | justify-content: space-between; 5 | align-items: center; 6 | padding: 0.4rem 0.8rem; 7 | width: 100%; 8 | font-weight: 600; 9 | } 10 | 11 | .tocCollapsibleButton::after { 12 | content: ""; 13 | background: var(--ifm-menu-link-sublist-icon) 50% 50% / 2rem 2rem no-repeat; 14 | filter: var(--ifm-menu-link-sublist-icon-filter); 15 | height: 1.25rem; 16 | width: 1.25rem; 17 | transform: rotate(180deg); 18 | transition: transform var(--ifm-transition-fast); 19 | } 20 | 21 | .tocCollapsibleButtonExpanded::after { 22 | transform: none; 23 | } 24 | -------------------------------------------------------------------------------- /static/bespoke-d2/animated.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | 3 | title: { 4 | label: Normal deployment 5 | near: bottom-center 6 | shape: text 7 | style.font-size: 40 8 | style.underline: true 9 | } 10 | 11 | local: { 12 | code: { 13 | icon: https://icons.terrastruct.com/dev/go.svg 14 | } 15 | } 16 | local.code -> github.dev: commit 17 | 18 | github: { 19 | icon: https://icons.terrastruct.com/dev/github.svg 20 | dev 21 | master: { 22 | workflows 23 | } 24 | 25 | dev -> master.workflows: merge trigger 26 | } 27 | 28 | github.master.workflows -> aws.builders: upload and run 29 | 30 | aws: { 31 | builders -> s3: upload binaries 32 | ec2 <- s3: pull binaries 33 | 34 | builders: { 35 | icon: https://icons.terrastruct.com/aws/Developer%20Tools/AWS-CodeBuild_light-bg.svg 36 | } 37 | s3: { 38 | icon: https://icons.terrastruct.com/aws/Storage/Amazon-S3-Glacier_light-bg.svg 39 | } 40 | ec2: { 41 | icon: https://icons.terrastruct.com/aws/_Group%20Icons/EC2-instance-container_light-bg.svg 42 | } 43 | } 44 | 45 | local.code -> aws.ec2: { 46 | style.opacity: 0.0 47 | } 48 | 49 | scenarios: { 50 | hotfix: { 51 | title.label: Hotfix deployment 52 | (local.code -> github.dev)[0].style: { 53 | stroke: "#ca052b" 54 | opacity: 0.1 55 | } 56 | 57 | github: { 58 | dev: { 59 | style.opacity: 0.1 60 | } 61 | master: { 62 | workflows: { 63 | style.opacity: 0.1 64 | } 65 | style.opacity: 0.1 66 | } 67 | 68 | (dev -> master.workflows)[0].style.opacity: 0.1 69 | style.opacity: 0.1 70 | style.fill: "#ca052b" 71 | } 72 | 73 | (github.master.workflows -> aws.builders)[0].style.opacity: 0.1 74 | 75 | (local.code -> aws.ec2)[0]: { 76 | style.opacity: 1 77 | style.stroke-dash: 5 78 | style.stroke: "#167c3c" 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /static/bespoke-d2/cat.d2: -------------------------------------------------------------------------------- 1 | how does the cat go?: { 2 | link: layers.cat 3 | } 4 | 5 | layers: { 6 | cat: { 7 | meoowww 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /static/bespoke-d2/chicken.d2: -------------------------------------------------------------------------------- 1 | Chicken's plan: { 2 | style.font-size: 35 3 | near: top-center 4 | shape: text 5 | } 6 | 7 | steps: { 8 | 1: { 9 | Approach road 10 | } 11 | 2: { 12 | Approach road -> Cross road 13 | } 14 | 3: { 15 | Cross road -> Make you wonder why 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /static/bespoke-d2/cult.d2: -------------------------------------------------------------------------------- 1 | text: |md 2 | # Introduction 3 | 4 | ## How to start a cult 5 | 6 | This presentation educates the public on starting a cult 7 | 8 | This is an abridged presentation 9 | | 10 | 11 | layers: { 12 | 1: { 13 | text: |md 14 | # What is a cult? 15 | - *Definition*: A group or movement with a shared devotion to a charismatic leader, an ideology, or a set of rituals and beliefs 16 | - *Characteristics*: Totalitarian control, manipulative practices, and exploitation of members 17 | | 18 | } 19 | 2: { 20 | text: |md 21 | # Charismatic Leader 22 | 23 | ## Role 24 | 25 | Cult leaders have a strong, magnetic personality, and are typically seen as an authority figure 26 | 27 | ## Tips: 28 | 29 | - Cultivate a unique and compelling persona 30 | - Be convincing and persuasive 31 | - Establish yourself as an authority figure with exclusive knowledge or abilities 32 | | 33 | } 34 | 3: { 35 | text: |md 36 | # Recruitment 37 | - *Importance*: New members are vital for the growth and sustainability of a cult 38 | - *Methods*: Targeting vulnerable individuals, offering solutions to personal problems, and using social pressure 39 | | 40 | } 41 | 4: { 42 | text: |md 43 | # Control and manipulation 44 | 45 | ## Purpose 46 | To maintain power over members and ensure loyalty 47 | 48 | ## Techniques 49 | Information control, emotional manipulation, and behavior control 50 | 51 | ## Tips: 52 | 53 | - Limit members' access to outside information and discourage critical thinking 54 | - Use guilt, shame, and fear to manipulate members' emotions 55 | - Create strict rules and rituals to control behavior 56 | | 57 | } 58 | 5: { 59 | text: |md 60 | # Enjoy your cult 61 | | 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /static/bespoke-d2/data.d2: -------------------------------------------------------------------------------- 1 | users: { 2 | shape: sql_table 3 | id: int 4 | token: string 5 | customer_id: string 6 | } 7 | 8 | # Continue nesting as needed! 9 | # layers: { 10 | # ... 11 | # } 12 | -------------------------------------------------------------------------------- /static/bespoke-d2/grid-column-dominant.d2: -------------------------------------------------------------------------------- 1 | grid-columns: 2 2 | grid-rows: 4 3 | 4 | a 5 | 6 | steps: { 7 | 1: { 8 | b 9 | } 10 | 2: { 11 | c 12 | } 13 | 3: { 14 | d 15 | } 16 | 4: { 17 | e 18 | } 19 | 5: { 20 | f 21 | } 22 | 6: { 23 | g 24 | } 25 | 7: { 26 | h 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /static/bespoke-d2/grid-nested-grid.d2: -------------------------------------------------------------------------------- 1 | grid-gap: 0 2 | grid-columns: 1 3 | header 4 | body: "" { 5 | grid-gap: 0 6 | grid-columns: 2 7 | content 8 | sidebar 9 | } 10 | footer 11 | -------------------------------------------------------------------------------- /static/bespoke-d2/grid-row-dominant.d2: -------------------------------------------------------------------------------- 1 | grid-rows: 4 2 | grid-columns: 2 3 | 4 | a 5 | 6 | steps: { 7 | 1: { 8 | b 9 | } 10 | 2: { 11 | c 12 | } 13 | 3: { 14 | d 15 | } 16 | 4: { 17 | e 18 | } 19 | 5: { 20 | f 21 | } 22 | 6: { 23 | g 24 | } 25 | 7: { 26 | h 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /static/bespoke-d2/imports-nested.d2: -------------------------------------------------------------------------------- 1 | serviceA -> serviceB 2 | serviceB.link: layers.serviceB 3 | 4 | layers: { 5 | serviceB: @serviceB 6 | } 7 | -------------------------------------------------------------------------------- /static/bespoke-d2/johnwick.d2: -------------------------------------------------------------------------------- 1 | shape: sequence_diagram 2 | 3 | john wick 4 | henchman 1 5 | henchman 2 6 | big boss 7 | 8 | steps: { 9 | 1: { 10 | henchman 1 -> john wick: shoots, misses 11 | } 12 | 2: { 13 | john wick -> henchman 1: shoots, hits 14 | henchman 1.style.fill: "#FFCCCB" 15 | } 16 | 3: { 17 | henchman 2 -> john wick: shoots, misses 18 | } 19 | 4: { 20 | john wick -> henchman 2: shoots, hits 21 | henchman 2.style.fill: "#FFCCCB" 22 | } 23 | 5: { 24 | big boss -> john wick: injures 25 | } 26 | 6: { 27 | john wick -> big boss: shoots, hits 28 | big boss.style.fill: "#FFCCCB" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /static/bespoke-d2/lotr.d2: -------------------------------------------------------------------------------- 1 | The shire 2 | 3 | journey: { 4 | link: layers.rivendell 5 | } 6 | 7 | layers: { 8 | rivendell: { 9 | elves: { 10 | elrond -> frodo: gives advice 11 | } 12 | 13 | take me home sam.link: _ 14 | go deeper: { 15 | link: layers.moria 16 | } 17 | 18 | layers: { 19 | moria: { 20 | dwarves 21 | 22 | take me home sam.link: _._ 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /static/bespoke-d2/serviceB.d2: -------------------------------------------------------------------------------- 1 | aws vault: { 2 | key 3 | token 4 | } 5 | stripe: { 6 | customer id 7 | } 8 | aws vault.key -> data 9 | aws vault.token -> data 10 | stripe.customer id -> data 11 | data.link: layers.data 12 | 13 | layers: { 14 | data: @data 15 | } 16 | -------------------------------------------------------------------------------- /static/bespoke-d2/styles-animated.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi { 3 | style.animated: true 4 | } 5 | x.style.animated: true 6 | -------------------------------------------------------------------------------- /static/bespoke-d2/tax.d2: -------------------------------------------------------------------------------- 1 | title: Current state { 2 | near: top-center 3 | shape: text 4 | style: { 5 | font-size: 40 6 | } 7 | } 8 | 9 | you -> accountant 10 | you -> turbotax 11 | turbotax -> government 12 | accountant -> turbotax 13 | government -> you: You owe\nus this much { 14 | style.opacity: 0 15 | } 16 | 17 | scenarios: { 18 | better: { 19 | title.label: A better world 20 | accountant.style.opacity: 0.2 21 | turbotax.style.opacity: 0.2 22 | you -> accountant: { 23 | style.opacity: 0.2 24 | } 25 | you -> turbotax: { 26 | style.opacity: 0.2 27 | } 28 | accountant -> turbotax: { 29 | style.opacity: 0.2 30 | } 31 | turbotax -> government: { 32 | style.opacity: 0.2 33 | } 34 | 35 | government -> you: { 36 | style.opacity: 1 37 | style.animated: true 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /static/bespoke-d2/terminal-theme.d2: -------------------------------------------------------------------------------- 1 | vars: { 2 | d2-config: { 3 | layout-engine: elk 4 | # Terminal theme code 5 | theme-id: 300 6 | } 7 | } 8 | network: { 9 | cell tower: { 10 | satellites: { 11 | shape: stored_data 12 | style.multiple: true 13 | } 14 | 15 | transmitter 16 | 17 | satellites -> transmitter: send 18 | satellites -> transmitter: send 19 | satellites -> transmitter: send 20 | } 21 | 22 | online portal: { 23 | ui: {shape: hexagon} 24 | } 25 | 26 | data processor: { 27 | storage: { 28 | shape: cylinder 29 | style.multiple: true 30 | } 31 | } 32 | 33 | cell tower.transmitter -> data processor.storage: phone logs 34 | } 35 | 36 | user: { 37 | shape: person 38 | width: 130 39 | } 40 | 41 | user -> network.cell tower: make call 42 | user -> network.online portal.ui: access { 43 | style.stroke-dash: 3 44 | } 45 | 46 | api server -> network.online portal.ui: display 47 | api server -> logs: persist 48 | logs: {shape: page; style.multiple: true} 49 | 50 | network.data processor -> api server 51 | -------------------------------------------------------------------------------- /static/bespoke-d2/theme-override.d2: -------------------------------------------------------------------------------- 1 | vars: { 2 | d2-config: { 3 | theme-overrides: { 4 | B1: "#2E7D32" 5 | B2: "#66BB6A" 6 | B3: "#A5D6A7" 7 | B4: "#C5E1A5" 8 | B5: "#E6EE9C" 9 | B6: "#FFF59D" 10 | 11 | AA2: "#0D47A1" 12 | AA4: "#42A5F5" 13 | AA5: "#90CAF9" 14 | 15 | AB4: "#F44336" 16 | AB5: "#FFCDD2" 17 | } 18 | } 19 | } 20 | network: { 21 | cell tower: { 22 | satellites: { 23 | shape: stored_data 24 | style.multiple: true 25 | } 26 | 27 | transmitter 28 | 29 | satellites -> transmitter: send 30 | satellites -> transmitter: send 31 | satellites -> transmitter: send 32 | } 33 | 34 | online portal: { 35 | ui: {shape: hexagon} 36 | } 37 | 38 | data processor: { 39 | storage: { 40 | shape: cylinder 41 | style.multiple: true 42 | } 43 | } 44 | 45 | cell tower.transmitter -> data processor.storage: phone logs 46 | } 47 | 48 | user: { 49 | shape: person 50 | width: 130 51 | } 52 | 53 | user -> network.cell tower: make call 54 | user -> network.online portal.ui: access { 55 | style.stroke-dash: 3 56 | } 57 | 58 | api server -> network.online portal.ui: display 59 | api server -> logs: persist 60 | logs: {shape: page; style.multiple: true} 61 | 62 | network.data processor -> api server 63 | -------------------------------------------------------------------------------- /static/bespoke-d2/tiktok.d2: -------------------------------------------------------------------------------- 1 | explain: |md 2 | This is the top layer, highest level of abstraction. 3 | | { 4 | near: top-center 5 | } 6 | 7 | Tik Tok's User Data: { 8 | link: layers.tiktok 9 | } 10 | 11 | layers: { 12 | tiktok: { 13 | explain: |md 14 | One layer deeper: 15 | 16 | Tik Tok's CEO explained that user data is stored in two places currently. 17 | | { 18 | near: top-center 19 | } 20 | Virginia data center <-> Hong Kong data center 21 | Virginia data center.link: layers.virginia 22 | Hong Kong data center.link: layers.hongkong 23 | 24 | layers: { 25 | virginia: { 26 | direction: right 27 | explain: |md 28 | Getting deeper into details: 29 | 30 | TikTok's CEO explains that Virginia data center has strict security measures. 31 | | { 32 | near: top-center 33 | } 34 | Oracle Databases: { 35 | shape: cylinder 36 | style.multiple: true 37 | } 38 | US residents -> Oracle Databases: access 39 | US residents: { 40 | shape: person 41 | } 42 | Third party auditors -> Oracle Databases: verify 43 | } 44 | hongkong: { 45 | direction: right 46 | explain: |md 47 | TikTok's CEO says data is actively being deleted and should be done by the end of the year. 48 | | { 49 | near: top-center 50 | } 51 | Legacy Databases: { 52 | shape: cylinder 53 | style.multiple: true 54 | } 55 | } 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /static/bespoke-d2/triple-glob.d2: -------------------------------------------------------------------------------- 1 | ***.style.fill: yellow 2 | **.shape: circle 3 | *.style.multiple: true 4 | 5 | x: { 6 | y 7 | } 8 | 9 | layers: { 10 | next: { 11 | a 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /static/blog/dark_mode/main.d2: -------------------------------------------------------------------------------- 1 | style.fill: transparent 2 | direction: down 3 | 4 | input: |d2 5 | # D2 script 6 | hello -> world 7 | | 8 | 9 | input -> compile -> objects 10 | 11 | objects: { 12 | custom styles 13 | } 14 | 15 | light theme -> exporter.CSS generator 16 | dark theme -> exporter.CSS generator 17 | 18 | exporter 19 | 20 | exporter: { 21 | renderer: set each fill\naccording to color coding { 22 | shape: oval 23 | } 24 | 25 | CSS generator: { 26 | shape: oval 27 | } 28 | 29 | CSS generator -> css 30 | css: |css 31 | .fill-N1: { 32 | fill: "#000" 33 | } 34 | 35 | @media (prefers-color-scheme: dark) { 36 | .fill-N1: { 37 | fill: "#fff" 38 | } 39 | } 40 | | 41 | renderer -> svg 42 | svg: |html 43 | <rect class="fill-N1" ... /> 44 | <!-- If object has custom style, --> 45 | <!-- style would be appended --> 46 | <rect class="fill-N1" 47 | style="fill: red" ... /> 48 | 49 | | { 50 | height: 200 51 | } 52 | } 53 | 54 | objects.custom styles -> exporter.svg 55 | 56 | SVG file: { 57 | shape: page 58 | } 59 | 60 | exporter.svg -> SVG file 61 | exporter.css -> SVG file 62 | 63 | static: This object doesn't change color,\nbecause it has fill explicitly set { 64 | style.fill: honeydew 65 | style.font-color: black 66 | } 67 | -------------------------------------------------------------------------------- /static/blog/dark_mode/perma.d2: -------------------------------------------------------------------------------- 1 | direction: down 2 | 3 | input: |d2 4 | # D2 script 5 | hello -> world 6 | | 7 | 8 | input -> compile -> objects 9 | 10 | objects: { 11 | custom styles 12 | } 13 | 14 | light theme -> exporter.CSS generator 15 | dark theme -> exporter.CSS generator 16 | 17 | exporter 18 | 19 | exporter: { 20 | renderer: set each fill\naccording to color coding { 21 | shape: oval 22 | } 23 | 24 | CSS generator: { 25 | shape: oval 26 | } 27 | 28 | CSS generator -> css 29 | css: |css 30 | .fill-N1: { 31 | fill: "#000" 32 | } 33 | 34 | @media (prefers-color-scheme: dark) { 35 | .fill-N1: { 36 | fill: "#fff" 37 | } 38 | } 39 | | 40 | renderer -> svg 41 | svg: |html 42 | <rect class="fill-N1" ... /> 43 | <!-- If object has custom style, --> 44 | <!-- style would be appended --> 45 | <rect class="fill-N1" 46 | style="fill: red" ... /> 47 | 48 | | { 49 | height: 200 50 | } 51 | } 52 | 53 | objects.custom styles -> exporter.svg 54 | 55 | SVG file: { 56 | shape: page 57 | } 58 | 59 | exporter.svg -> SVG file 60 | exporter.css -> SVG file 61 | 62 | static: This object doesn't change color,\nbecause it has fill explicitly set { 63 | style.fill: honeydew 64 | style.font-color: black 65 | } 66 | -------------------------------------------------------------------------------- /static/blog/dark_mode/permadark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/blog/dark_mode/permadark.png -------------------------------------------------------------------------------- /static/blog/dark_mode/permalight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/blog/dark_mode/permalight.png -------------------------------------------------------------------------------- /static/blog/dark_mode/render.sh: -------------------------------------------------------------------------------- 1 | cd $(git rev-parse --show-toplevel) 2 | 3 | d2 --dark-theme=200 -l elk --pad 20 ./static/blog/dark_mode/main.d2 ./static/blog/dark_mode/main.svg2 4 | 5 | d2 -l elk --pad 20 ./static/blog/dark_mode/perma.d2 ./static/blog/dark_mode/permalight.png 6 | d2 --theme=200 -l elk --pad 20 ./static/blog/dark_mode/perma.d2 ./static/blog/dark_mode/permadark.png 7 | -------------------------------------------------------------------------------- /static/blog/sketch/animated.d2: -------------------------------------------------------------------------------- 1 | vars: { 2 | d2-config: { 3 | sketch: true 4 | } 5 | } 6 | winter.snow -> summer.sun -> trees -> winter.snow: {style.animated: true} 7 | -------------------------------------------------------------------------------- /static/blog/sketch/excalidraw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/blog/sketch/excalidraw.png -------------------------------------------------------------------------------- /static/blog/sketch/main.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | 3 | Processing Pipeline: { 4 | shape: text 5 | style.font-size: 55 6 | near: top-center 7 | } 8 | 9 | Preprocessing: { 10 | icon: https://icons.terrastruct.com/azure%2FDatabases%20Service%20Color%2FAzure%20SQL%20DataWarehouse.svg 11 | } 12 | 13 | gpu: Multi-GPU\nTraining { 14 | icon: https://icons.terrastruct.com/aws%2FRobotics%2FRobotics.svg 15 | } 16 | 17 | Eval: { 18 | icon: https://icons.terrastruct.com/essentials%2F110-zoom%20in.svg 19 | } 20 | 21 | Inference: { 22 | icon: https://icons.terrastruct.com/essentials%2F005-programmer.svg 23 | } 24 | 25 | Orchestrator: { 26 | pipeline: Full working\npipeline { 27 | shape: queue 28 | } 29 | } 30 | 31 | Preprocessing -> Orchestrator.pipeline 32 | gpu -> Orchestrator.pipeline 33 | Eval -> Orchestrator.pipeline 34 | Inference -> Orchestrator.pipeline 35 | 36 | Orchestrator -> Data Warehouse 37 | 38 | Data Warehouse: { 39 | Primary: { 40 | shape: cylinder 41 | } 42 | Secondary: { 43 | shape: cylinder 44 | } 45 | style: { 46 | fill: "#fdfbe3" 47 | } 48 | } 49 | 50 | "Note: we can replace the orchestrator with Kubernetes when we run out of things to do": { 51 | style.fill: "#056C4E" 52 | style.font-color: white 53 | style.stroke-width: 0 54 | width: 800 55 | near: bottom-center 56 | } 57 | -------------------------------------------------------------------------------- /static/blog/sketch/overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/blog/sketch/overlay.png -------------------------------------------------------------------------------- /static/blog/sketch/render.sh: -------------------------------------------------------------------------------- 1 | cd $(git rev-parse --show-toplevel) 2 | 3 | d2 -l elk --pad 20 --sketch ./static/blog/sketch/main.d2 ./static/blog/sketch/main.svg2 4 | 5 | d2 --pad 20 --sketch ./static/blog/sketch/animated.d2 ./static/blog/sketch/animated.svg2 6 | -------------------------------------------------------------------------------- /static/d2/c4-code1.d2: -------------------------------------------------------------------------------- 1 | api_server: |go 2 | func StartServer(port int) error 3 | func SetupRoutes(router *mux.Router) 4 | func AuthMiddleware(next http.Handler) http.Handler 5 | | 6 | 7 | graphql_handler: |go 8 | func NewHandler(schema *graphql.Schema) *Handler 9 | func ServeHTTP(w http.ResponseWriter, r *http.Request) 10 | func ExecuteQuery(query string, variables map[string]interface{}) *Result 11 | | 12 | 13 | resolvers: |go 14 | func AccountResolver(p graphql.ResolveParams) (interface{}, error) 15 | func TransactionResolver(p graphql.ResolveParams) (interface{}, error) 16 | func UserResolver(p graphql.ResolveParams) (interface{}, error) 17 | | 18 | 19 | schema: |go 20 | func BuildSchema() (*graphql.Schema, error) 21 | func RegisterTypes(schema *graphql.Schema) 22 | func RegisterQueries(schema *graphql.Schema) 23 | func RegisterMutations(schema *graphql.Schema) 24 | | 25 | 26 | clients: |go 27 | func NewAccountClient(baseURL string) *AccountClient 28 | func NewTransactionClient(baseURL string) *TransactionClient 29 | func (c *AccountClient) GetAccount(id string) (*Account, error) 30 | func (c *TransactionClient) ListTransactions(accountID string) ([]*Transaction, error) 31 | | 32 | 33 | api_server -> graphql_handler: { 34 | label: "uses" 35 | } 36 | 37 | graphql_handler -> resolvers: { 38 | label: "calls" 39 | style.stroke-dash: 3 40 | } 41 | 42 | graphql_handler -> schema: { 43 | label: "uses" 44 | style.stroke: "#4682B4" 45 | } 46 | 47 | resolvers -> clients: { 48 | label: "calls" 49 | style.stroke-width: 2 50 | } 51 | 52 | schema -> resolvers: { 53 | label: "references" 54 | style.stroke-dash: 5 55 | style.stroke: "#2E8B57" 56 | } 57 | -------------------------------------------------------------------------------- /static/d2/c4-legend.d2: -------------------------------------------------------------------------------- 1 | ...@c4-models 2 | **: suspend 3 | **: unsuspend { 4 | &class: customer-facing 5 | } 6 | 7 | vars: { 8 | d2-legend: { 9 | banking: Banking { 10 | style.fill: "#87CEEB" 11 | } 12 | banking -> x: Alerting { 13 | style.stroke-dash: 5 14 | style.stroke: "#2E8B57" 15 | } 16 | banking -> y: Authentication { 17 | style.stroke-width: 2 18 | style.stroke: "#800080" 19 | } 20 | x.style.opacity: 0 21 | y.style.opacity: 0 22 | } 23 | } 24 | 25 | atm_system -> mobile_banking_api: { 26 | source-arrowhead: { 27 | shape: triangle 28 | } 29 | target-arrowhead: { 30 | shape: triangle 31 | } 32 | label: "Integration" 33 | style.stroke: "#4682B4" 34 | } 35 | 36 | notification_system -> chatbot: { 37 | label: "Sends alerts via" 38 | style.stroke-dash: 5 39 | style.stroke: "#2E8B57" 40 | } 41 | 42 | kyc_system -> investment_platform: { 43 | label: "Verifies identity" 44 | style.stroke-width: 2 45 | style.stroke: "#800080" 46 | } 47 | 48 | mobile_banking_api -> bill_payment: { 49 | label: "Provides access" 50 | style.stroke: "#FF6347" 51 | } 52 | 53 | chatbot -> investment_platform: { 54 | label: "Answers questions" 55 | style.stroke-dash: 3 56 | style.stroke: "#B0E0E6" 57 | } 58 | 59 | atm_system -> bill_payment: { 60 | label: "Allows payments" 61 | style.stroke: "#87CEEB" 62 | } 63 | 64 | kyc_system -> mobile_banking_api: { 65 | label: "Authenticates" 66 | style.stroke: "#800080" 67 | } 68 | 69 | notification_system -> investment_platform: { 70 | label: "Sends alerts" 71 | style.stroke-dash: 5 72 | style.stroke: "#2E8B57" 73 | } 74 | -------------------------------------------------------------------------------- /static/d2/c4-tags2.d2: -------------------------------------------------------------------------------- 1 | ...@c4-models 2 | **: suspend 3 | **: unsuspend { 4 | &class: customer-facing 5 | } 6 | -------------------------------------------------------------------------------- /static/d2/c4-tags3.d2: -------------------------------------------------------------------------------- 1 | ...@c4-models 2 | **: suspend 3 | **: unsuspend { 4 | &class: customer-facing 5 | } 6 | 7 | atm_system -> mobile_banking_api: { 8 | source-arrowhead: { 9 | shape: triangle 10 | } 11 | target-arrowhead: { 12 | shape: triangle 13 | } 14 | label: "Integration" 15 | style.stroke: "#4682B4" 16 | } 17 | 18 | notification_system -> chatbot: { 19 | label: "Sends alerts via" 20 | style.stroke-dash: 5 21 | style.stroke: "#2E8B57" 22 | } 23 | 24 | kyc_system -> investment_platform: { 25 | label: "Verifies identity" 26 | style.stroke-width: 2 27 | style.stroke: "#800080" 28 | } 29 | 30 | mobile_banking_api -> bill_payment: { 31 | label: "Provides access" 32 | style.stroke: "#FF6347" 33 | } 34 | 35 | chatbot -> investment_platform: { 36 | label: "Answers questions" 37 | style.stroke-dash: 3 38 | style.stroke: "#B0E0E6" 39 | } 40 | 41 | atm_system -> bill_payment: { 42 | label: "Allows payments" 43 | style.stroke: "#87CEEB" 44 | } 45 | 46 | kyc_system -> mobile_banking_api: { 47 | label: "Authenticates" 48 | style.stroke: "#800080" 49 | } 50 | 51 | notification_system -> investment_platform: { 52 | label: "Sends alerts" 53 | style.stroke-dash: 5 54 | style.stroke: "#2E8B57" 55 | } 56 | -------------------------------------------------------------------------------- /static/d2/classes-1.d2: -------------------------------------------------------------------------------- 1 | MyClass: { 2 | shape: class 3 | 4 | field: "[]string" 5 | method(a uint64): (x, y int) 6 | } 7 | -------------------------------------------------------------------------------- /static/d2/classes-2.d2: -------------------------------------------------------------------------------- 1 | D2 Parser: { 2 | shape: class 3 | 4 | # Default visibility is + so no need to specify. 5 | +reader: io.RuneReader 6 | readerPos: d2ast.Position 7 | 8 | # Private field. 9 | -lookahead: "[]rune" 10 | 11 | # Protected field. 12 | # We have to escape the # to prevent the line from being parsed as a comment. 13 | \#lookaheadPos: d2ast.Position 14 | 15 | +peek(): (r rune, eof bool) 16 | rewind() 17 | commit() 18 | 19 | \#peekn(n int): (s string, eof bool) 20 | } 21 | 22 | "github.com/terrastruct/d2parser.git" -> D2 Parser 23 | -------------------------------------------------------------------------------- /static/d2/classes.d2: -------------------------------------------------------------------------------- 1 | classes: { 2 | base: { 3 | style: { 4 | border-radius: 4 5 | shadow: true 6 | } 7 | } 8 | error: { 9 | style.fill: pink 10 | style.stroke: red 11 | } 12 | med: { 13 | width: 200 14 | height: 200 15 | style.font-size: 24 16 | } 17 | large: { 18 | width: 300 19 | height: 300 20 | style.font-size: 28 21 | } 22 | xlarge: { 23 | width: 400 24 | height: 400 25 | style.font-size: 32 26 | } 27 | person: { 28 | shape: person 29 | style.stroke-dash: 3 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /static/d2/code-2.d2: -------------------------------------------------------------------------------- 1 | explanation: |go 2 | awsSession := From(c.Request.Context()) 3 | client := s3.New(awsSession) 4 | 5 | ctx, cancelFn := context.WithTimeout(c.Request.Context(), AWS_TIMEOUT) 6 | defer cancelFn() 7 | | 8 | -------------------------------------------------------------------------------- /static/d2/code.d2: -------------------------------------------------------------------------------- 1 | some code: |`ts 2 | declare function getSmallPet(): Fish | Bird; 3 | const works = (a > 1) || (b < 2) 4 | `| 5 | explanation: |go 6 | awsSession := From(c.Request.Context()) 7 | client := s3.New(awsSession) 8 | 9 | ctx, cancelFn := context.WithTimeout(c.Request.Context(), AWS_TIMEOUT) 10 | defer cancelFn() 11 | | 12 | 13 | some code -> explanation -> some code 14 | -------------------------------------------------------------------------------- /static/d2/connections-1.d2: -------------------------------------------------------------------------------- 1 | Write Replica Canada <-> Write Replica Australia 2 | 3 | Read Replica <- Master 4 | 5 | x -- y 6 | 7 | super long shape id here -> super long shape id even longer here 8 | -------------------------------------------------------------------------------- /static/d2/connections-2.d2: -------------------------------------------------------------------------------- 1 | Database -> S3: backup 2 | Database -> S3 3 | Database -> S3: backup 4 | -------------------------------------------------------------------------------- /static/d2/connections-3.d2: -------------------------------------------------------------------------------- 1 | # The label applies to each connection in the chain. 2 | High Mem Instance -> EC2 <- High CPU Instance: Hosted By 3 | -------------------------------------------------------------------------------- /static/d2/connections-4.d2: -------------------------------------------------------------------------------- 1 | Stage One -> Stage Two -> Stage Three -> Stage Four 2 | Stage Four -> Stage One: repeat 3 | -------------------------------------------------------------------------------- /static/d2/connections-5.d2: -------------------------------------------------------------------------------- 1 | a: The best way to avoid responsibility is to say, "I've got responsibilities" 2 | b: Whether weary or unweary, O man, do not rest 3 | c: I still maintain the point that designing a monolithic kernel in 1991 is a 4 | 5 | a -> b: To err is human, to moo bovine { 6 | source-arrowhead: 1 7 | target-arrowhead: * { 8 | shape: diamond 9 | } 10 | } 11 | 12 | b <-> c: "Reality is just a crutch for people who can't handle science fiction" { 13 | source-arrowhead.label: 1 14 | target-arrowhead: * { 15 | shape: diamond 16 | style.filled: true 17 | } 18 | } 19 | 20 | d: A black cat crossing your path signifies that the animal is going somewhere 21 | 22 | d -> a -> c 23 | -------------------------------------------------------------------------------- /static/d2/connections-reference.d2: -------------------------------------------------------------------------------- 1 | x -> y: hi 2 | x -> y: hello 3 | 4 | (x -> y)[0].style.stroke: red 5 | (x -> y)[1].style.stroke: blue 6 | -------------------------------------------------------------------------------- /static/d2/containers-1.d2: -------------------------------------------------------------------------------- 1 | server 2 | # Declares a shape inside of another shape 3 | server.process 4 | 5 | # Can declare the container and child in same line 6 | im a parent.im a child 7 | 8 | # Since connections can also declare keys, this works too 9 | apartment.Bedroom.Bathroom -> office.Spare Room.Bathroom: Portal 10 | -------------------------------------------------------------------------------- /static/d2/containers-2.d2: -------------------------------------------------------------------------------- 1 | clouds: { 2 | aws: { 3 | load_balancer -> api 4 | api -> db 5 | } 6 | gcloud: { 7 | auth -> db 8 | } 9 | 10 | gcloud -> aws 11 | } 12 | -------------------------------------------------------------------------------- /static/d2/containers-3.d2: -------------------------------------------------------------------------------- 1 | clouds: { 2 | aws: AWS { 3 | load_balancer -> api 4 | api -> db 5 | } 6 | gcloud: Google Cloud { 7 | auth -> db 8 | } 9 | 10 | gcloud -> aws 11 | } 12 | 13 | users -> clouds.aws.load_balancer 14 | users -> clouds.gcloud.auth 15 | 16 | ci.deploys -> clouds 17 | -------------------------------------------------------------------------------- /static/d2/containers-underscore.d2: -------------------------------------------------------------------------------- 1 | christmas: { 2 | presents 3 | } 4 | birthdays: { 5 | presents 6 | _.christmas.presents -> presents: regift 7 | _.christmas.style.fill: "#ACE1AF" 8 | } 9 | -------------------------------------------------------------------------------- /static/d2/dimensions.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | 3 | small jerry: "" { 4 | shape: image 5 | icon: https://static.wikia.nocookie.net/tomandjerry/images/4/46/JerryJumbo3-1-.jpg 6 | width: 200 7 | height: 200 8 | } 9 | 10 | med jerry: "" { 11 | shape: image 12 | icon: https://static.wikia.nocookie.net/tomandjerry/images/4/46/JerryJumbo3-1-.jpg 13 | width: 300 14 | height: 300 15 | } 16 | 17 | big jerry: "" { 18 | shape: image 19 | icon: https://static.wikia.nocookie.net/tomandjerry/images/4/46/JerryJumbo3-1-.jpg 20 | width: 500 21 | height: 400 22 | } 23 | 24 | big jerry -> med jerry -> small jerry 25 | -------------------------------------------------------------------------------- /static/d2/direction-right.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y -> z: hello 3 | -------------------------------------------------------------------------------- /static/d2/direction-up.d2: -------------------------------------------------------------------------------- 1 | direction: up 2 | x -> y -> z: hello 3 | -------------------------------------------------------------------------------- /static/d2/globs-casing.d2: -------------------------------------------------------------------------------- 1 | diddy kong 2 | Donkey Kong 3 | 4 | *kong.style.fill: brown 5 | -------------------------------------------------------------------------------- /static/d2/globs-connections.d2: -------------------------------------------------------------------------------- 1 | vars: { 2 | d2-config: { 3 | layout-engine: elk 4 | } 5 | } 6 | 7 | Spiderman 1 8 | Spiderman 2 9 | Spiderman 3 10 | 11 | * -> *: 👉 12 | -------------------------------------------------------------------------------- /static/d2/globs-filter-2.d2: -------------------------------------------------------------------------------- 1 | the-little-cannon: { 2 | class: [server; deployed] 3 | } 4 | dino: { 5 | class: [internal; deployed] 6 | } 7 | catapult: { 8 | class: [server] 9 | } 10 | 11 | *: { 12 | &class: server 13 | style.multiple: true 14 | } 15 | -------------------------------------------------------------------------------- /static/d2/globs-filter-3.d2: -------------------------------------------------------------------------------- 1 | **: { 2 | &connected: true 3 | style.fill: yellow 4 | } 5 | 6 | **: { 7 | &leaf: true 8 | style.stroke: red 9 | } 10 | 11 | container: { 12 | a -> b 13 | } 14 | c 15 | -------------------------------------------------------------------------------- /static/d2/globs-filter-endpoints.d2: -------------------------------------------------------------------------------- 1 | a: { 2 | shape: circle 3 | style: { 4 | fill: blue 5 | opacity: 0.8 6 | } 7 | } 8 | b: { 9 | shape: rectangle 10 | style: { 11 | fill: red 12 | opacity: 0.5 13 | } 14 | } 15 | c: { 16 | shape: diamond 17 | style.fill: green 18 | style.opacity: 0.8 19 | } 20 | (* -> *)[*]: { 21 | &src.style.fill: blue 22 | style.stroke-dash: 3 23 | } 24 | (* -> *)[*]: { 25 | &dst.style.opacity: 0.8 26 | style.stroke: cyan 27 | } 28 | (* -> *)[*]: { 29 | &src.shape: rectangle 30 | &dst.style.fill: green 31 | style.stroke-width: 5 32 | } 33 | a -> b 34 | b -> c 35 | a -> c 36 | -------------------------------------------------------------------------------- /static/d2/globs-filter-glob-value.d2: -------------------------------------------------------------------------------- 1 | *: { 2 | &link: * 3 | style.fill: red 4 | } 5 | 6 | x.link: https://google.com 7 | y 8 | -------------------------------------------------------------------------------- /static/d2/globs-filter.d2: -------------------------------------------------------------------------------- 1 | bravo team.shape: person 2 | charlie team.shape: person 3 | command center.shape: cloud 4 | hq.shape: rectangle 5 | 6 | *: { 7 | &shape: person 8 | style.multiple: true 9 | } 10 | -------------------------------------------------------------------------------- /static/d2/globs-indexed-connections.d2: -------------------------------------------------------------------------------- 1 | lady 1 2 | lady 2 3 | 4 | barbie 5 | 6 | lady 1 -> barbie: hi barbie 7 | lady 2 -> barbie: hi barbie 8 | 9 | (lady* -> barbie)[*].style.stroke: pink 10 | -------------------------------------------------------------------------------- /static/d2/globs-intro.d2: -------------------------------------------------------------------------------- 1 | iphone 10 2 | iphone 11 mini 3 | iphone 11 pro 4 | iphone 12 mini 5 | 6 | *.height: 300 7 | *.width: 140 8 | *mini.height: 200 9 | *pro.height: 400 10 | -------------------------------------------------------------------------------- /static/d2/globs-inverse-filter.d2: -------------------------------------------------------------------------------- 1 | bravo team.shape: person 2 | charlie team.shape: person 3 | command center.shape: cloud 4 | hq.shape: rectangle 5 | 6 | *: { 7 | !&shape: person 8 | style.multiple: true 9 | } 10 | -------------------------------------------------------------------------------- /static/d2/globs-lazy.d2: -------------------------------------------------------------------------------- 1 | a 2 | 3 | * -> y 4 | 5 | b 6 | c 7 | -------------------------------------------------------------------------------- /static/d2/globs-multiple.d2: -------------------------------------------------------------------------------- 1 | teacher 2 | thriller 3 | thrifter 4 | 5 | t*h*r.shape: person 6 | -------------------------------------------------------------------------------- /static/d2/globs-nested.d2: -------------------------------------------------------------------------------- 1 | conversation 1: { 2 | shape: sequence_diagram 3 | alice -> bob: hi 4 | bob -> alice: hi 5 | } 6 | 7 | conversation 2: { 8 | shape: sequence_diagram 9 | alice -> bob: hello again 10 | alice -> bob: hello? 11 | bob -> alice: hello 12 | } 13 | 14 | # Recursively target all shapes... 15 | **: { 16 | # ... that are sequence diagrams 17 | &shape: sequence_diagram 18 | # Then recursively set all shapes in them to person 19 | **: {shape: person} 20 | } 21 | -------------------------------------------------------------------------------- /static/d2/globs-recursive-2.d2: -------------------------------------------------------------------------------- 1 | zone-A: { 2 | machine A 3 | machine B: { 4 | submachine A 5 | submachine B 6 | } 7 | } 8 | 9 | zone-A.** -> load balancer 10 | -------------------------------------------------------------------------------- /static/d2/globs-recursive.d2: -------------------------------------------------------------------------------- 1 | a: { 2 | b: { 3 | c 4 | } 5 | } 6 | 7 | **.style.border-radius: 7 8 | -------------------------------------------------------------------------------- /static/d2/globs-scope.d2: -------------------------------------------------------------------------------- 1 | foods: { 2 | pizzas: { 3 | cheese 4 | sausage 5 | pineapple 6 | *.shape: circle 7 | } 8 | humans: { 9 | john 10 | james 11 | *.shape: person 12 | } 13 | humans.* -> pizzas.pineapple: eats 14 | } 15 | -------------------------------------------------------------------------------- /static/d2/grid-2.d2: -------------------------------------------------------------------------------- 1 | grid-rows: 3 2 | Executive 3 | Legislative 4 | Judicial 5 | -------------------------------------------------------------------------------- /static/d2/grid-3.d2: -------------------------------------------------------------------------------- 1 | grid-columns: 3 2 | Executive 3 | Legislative 4 | Judicial 5 | -------------------------------------------------------------------------------- /static/d2/grid-4.d2: -------------------------------------------------------------------------------- 1 | grid-rows: 2 2 | grid-columns: 2 3 | Executive 4 | Legislative 5 | Judicial 6 | -------------------------------------------------------------------------------- /static/d2/grid-aligned.d2: -------------------------------------------------------------------------------- 1 | classes: { 2 | invisible: { 3 | style.opacity: 0 4 | label: a 5 | } 6 | } 7 | 8 | grid-columns: 1 9 | us-east-1: { 10 | grid-rows: 1 11 | a 12 | b 13 | c 14 | d 15 | e 16 | } 17 | 18 | us-west-1: { 19 | grid-rows: 1 20 | pad1.class: invisible 21 | pad2.class: invisible 22 | a 23 | # Move the label so it doesn't go through the connection 24 | label.near: bottom-center 25 | } 26 | 27 | us-east-1.c -> us-west-1.a 28 | -------------------------------------------------------------------------------- /static/d2/grid-dimensions.d2: -------------------------------------------------------------------------------- 1 | grid-rows: 2 2 | Executive 3 | Legislative 4 | Judicial 5 | The American Government.width: 400 6 | -------------------------------------------------------------------------------- /static/d2/grid-fill.d2: -------------------------------------------------------------------------------- 1 | grid-rows: 3 2 | Executive 3 | Legislative 4 | Judicial 5 | The American Government.width: 400 6 | Voters 7 | Non-voters 8 | -------------------------------------------------------------------------------- /static/d2/grid-nested-grid.d2: -------------------------------------------------------------------------------- 1 | grid-gap: 0 2 | grid-columns: 1 3 | header 4 | body: "" { 5 | grid-gap: 0 6 | grid-columns: 2 7 | content 8 | sidebar 9 | } 10 | footer 11 | -------------------------------------------------------------------------------- /static/d2/grid-unaligned.d2: -------------------------------------------------------------------------------- 1 | grid-columns: 1 2 | us-east-1: { 3 | grid-rows: 1 4 | a 5 | b 6 | c 7 | d 8 | e 9 | } 10 | 11 | us-west-1: { 12 | grid-rows: 1 13 | a 14 | } 15 | 16 | us-east-1.c -> us-west-1.a 17 | -------------------------------------------------------------------------------- /static/d2/grid.d2: -------------------------------------------------------------------------------- 1 | grid-rows: 5 2 | style.fill: black 3 | 4 | classes: { 5 | white square: { 6 | label: "" 7 | width: 120 8 | style: { 9 | fill: white 10 | stroke: cornflowerblue 11 | stroke-width: 10 12 | } 13 | } 14 | block: { 15 | style: { 16 | text-transform: uppercase 17 | font-color: white 18 | fill: darkcyan 19 | stroke: black 20 | } 21 | } 22 | } 23 | 24 | flow1.class: white square 25 | flow2.class: white square 26 | flow3.class: white square 27 | flow4.class: white square 28 | flow5.class: white square 29 | flow6.class: white square 30 | flow7.class: white square 31 | flow8.class: white square 32 | flow9.class: white square 33 | 34 | dagger engine: { 35 | width: 800 36 | class: block 37 | style: { 38 | fill: beige 39 | stroke: darkcyan 40 | font-color: blue 41 | stroke-width: 8 42 | } 43 | } 44 | 45 | any docker compatible runtime: { 46 | width: 800 47 | class: block 48 | style: { 49 | fill: lightcyan 50 | stroke: darkcyan 51 | font-color: black 52 | stroke-width: 8 53 | } 54 | icon: https://icons.terrastruct.com/dev%2Fdocker.svg 55 | } 56 | 57 | any ci: { 58 | class: block 59 | style: { 60 | fill: gold 61 | stroke: maroon 62 | font-color: maroon 63 | stroke-width: 8 64 | } 65 | } 66 | windows.class: block 67 | linux.class: block 68 | macos.class: block 69 | kubernetes.class: block 70 | -------------------------------------------------------------------------------- /static/d2/hello-world.d2: -------------------------------------------------------------------------------- 1 | x -> y: hello world 2 | -------------------------------------------------------------------------------- /static/d2/icon-placement.d2: -------------------------------------------------------------------------------- 1 | vpc: VPC 1 10.1.0.0./16 { 2 | icon: https://icons.terrastruct.com/aws%2F_Group%20Icons%2FVirtual-private-cloud-VPC_light-bg.svg 3 | style: { 4 | stroke: green 5 | font-color: green 6 | fill: white 7 | } 8 | az: Availability Zone A { 9 | style: { 10 | stroke: blue 11 | font-color: blue 12 | stroke-dash: 3 13 | fill: white 14 | } 15 | firewall: Firewall Subnet A { 16 | icon: https://icons.terrastruct.com/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg 17 | style: { 18 | stroke: purple 19 | font-color: purple 20 | fill: "#e1d5e7" 21 | } 22 | ec2: EC2 Instance { 23 | icon: https://icons.terrastruct.com/aws%2FCompute%2F_Instance%2FAmazon-EC2_C4-Instance_light-bg.svg 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /static/d2/icons-1.d2: -------------------------------------------------------------------------------- 1 | deploy: { 2 | icon: https://icons.terrastruct.com/aws%2FDeveloper%20Tools%2FAWS-CodeDeploy.svg 3 | } 4 | 5 | backup: { 6 | icon: https://icons.terrastruct.com/aws%2FStorage%2FAWS-Backup.svg 7 | } 8 | 9 | deploy -> backup: { 10 | icon: https://icons.terrastruct.com/infra%2F002-backup.svg 11 | } 12 | -------------------------------------------------------------------------------- /static/d2/icons-image.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | server: { 3 | shape: image 4 | icon: https://icons.terrastruct.com/tech/022-server.svg 5 | } 6 | 7 | github: { 8 | shape: image 9 | icon: https://icons.terrastruct.com/dev/github.svg 10 | } 11 | 12 | server -> github 13 | -------------------------------------------------------------------------------- /static/d2/imports-classes-main.d2: -------------------------------------------------------------------------------- 1 | ...@classes 2 | user.class: person 3 | error.class: [base; error] 4 | modal.class: [base; med] 5 | 6 | user -> app.signup: click 7 | app.signup -> error: invalid fields 8 | app.signup -> modal: continue registration 9 | -------------------------------------------------------------------------------- /static/d2/imports-mv-access-view.d2: -------------------------------------------------------------------------------- 1 | ...@models 2 | it -> vpn -> postgres 3 | -------------------------------------------------------------------------------- /static/d2/imports-mv-ssh-view.d2: -------------------------------------------------------------------------------- 1 | ...@models 2 | it -> postgres: ssh, bypassing VPN 3 | -------------------------------------------------------------------------------- /static/d2/imports-normal-x.d2: -------------------------------------------------------------------------------- 1 | x: { 2 | shape: circle 3 | } 4 | -------------------------------------------------------------------------------- /static/d2/imports-normal.d2: -------------------------------------------------------------------------------- 1 | a: @imports-normal-x 2 | a -> b 3 | -------------------------------------------------------------------------------- /static/d2/imports-targeted.d2: -------------------------------------------------------------------------------- 1 | ...@people.management 2 | joe -> donuts: loves 3 | jan -> donuts: brings 4 | -------------------------------------------------------------------------------- /static/d2/imports-template.d2: -------------------------------------------------------------------------------- 1 | template: { 2 | ...@imports-wrapper-template 3 | synergy: { 4 | our firm -> yours: value add 5 | } 6 | stakeholders: { 7 | george.shape: person 8 | tim.shape: person 9 | tim.tooltip: is this web scale? 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /static/d2/imports-vv-history.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | Users 1: Users Table (v0.1) { 3 | ...@"users-v0.1" 4 | } 5 | 6 | Users 2: Users Table (current) { 7 | ...@users-current 8 | } 9 | 10 | Users 1 -> Users 2 11 | -------------------------------------------------------------------------------- /static/d2/imports-wrapper-template.d2: -------------------------------------------------------------------------------- 1 | style: { 2 | fill: "#E3EDE6" 3 | fill-pattern: dots 4 | stroke: "#820758" 5 | stroke-width: 3 6 | border-radius: 2 7 | shadow: true 8 | } 9 | label: "" 10 | -------------------------------------------------------------------------------- /static/d2/language.d2: -------------------------------------------------------------------------------- 1 | a: "好笑的猫咪跳舞，\n 在月亮下欢唱。\n 它踩在小青蛙头上，\n 嘴里嚼着苹果香。" 2 | b: "웃기는 고양이 날다,\n 달빛 아래 춤을 추다.\n 개구리 머리 밟다,\n 입 속 사과 향기 즐기다." 3 | 4 | a -> b 5 | 6 | a.style.font-size: 24 7 | b.style.font-size: 24 8 | -------------------------------------------------------------------------------- /static/d2/latex.d2: -------------------------------------------------------------------------------- 1 | grid-columns: 3 2 | grid-gap: 100 3 | 4 | *.style.fill: transparent 5 | *.style.stroke: black 6 | 7 | amscd plugin: { 8 | ex: |tex 9 | \begin{CD} B @>{\text{very long label}}>> C S^{{\mathcal{W}}_\Lambda}\otimes T @>j>> T\\ @VVV V \end{CD} 10 | | 11 | } 12 | 13 | braket plugin: { 14 | ex: |tex 15 | \bra{a}\ket{b} 16 | | 17 | } 18 | 19 | cancel plugin: { 20 | ex: |tex 21 | \cancel{Culture + 5} 22 | | 23 | } 24 | 25 | color plugin: { 26 | ex: |tex 27 | \textcolor{red}{y} = \textcolor{green}{\sin} x 28 | | 29 | } 30 | 31 | gensymb plugin: { 32 | ex: |tex 33 | \lambda = 10.6\,\micro\mathrm{m} 34 | | 35 | } 36 | 37 | mhchem plugin: { 38 | ex: |tex 39 | \ce{SO4^2- + Ba^2+ -> BaSO4 v} 40 | | 41 | } 42 | 43 | physics plugin: { 44 | ex: |tex 45 | \var{F[g(x)]} 46 | \dd(\cos\theta) 47 | | 48 | } 49 | 50 | multilines: { 51 | ex: |tex 52 | \displaylines{x = a + b \\ y = b + c} 53 | \sum_{k=1}^{n} h_{k} \int_{0}^{1} \bigl(\partial_{k} f(x_{k-1}+t h_{k} e_{k}) -\partial_{k} f(a)\bigr) \,dt 54 | | 55 | } 56 | 57 | asm: { 58 | ex: |latex 59 | \min_{ \mathclap{\substack{ x \in \mathbb{R}^n \ x \geq 0 \ Ax \leq b }}} c^T x 60 | | 61 | } 62 | -------------------------------------------------------------------------------- /static/d2/legend-hidden.d2: -------------------------------------------------------------------------------- 1 | vars: { 2 | d2-legend: { 3 | a <-> b: Good relationship { 4 | style.stroke: red 5 | style.stroke-dash: 2 6 | } 7 | a.style.opacity: 0 8 | b.style.opacity: 0 9 | } 10 | } 11 | 12 | api-1 <-> api-2: { 13 | style.stroke: red 14 | style.stroke-dash: 2 15 | } 16 | api-1 -> api-3: { 17 | target-arrowhead.shape: circle 18 | } 19 | -------------------------------------------------------------------------------- /static/d2/legend.d2: -------------------------------------------------------------------------------- 1 | vars: { 2 | d2-legend: { 3 | a: { 4 | label: Microservice 5 | } 6 | b: Database { 7 | shape: cylinder 8 | style.stroke-dash: 2 9 | } 10 | a <-> b: Good relationship { 11 | style.stroke: red 12 | style.stroke-dash: 2 13 | style.stroke-width: 1 14 | } 15 | a -> b: Bad relationship 16 | a -> b: Tenuous { 17 | target-arrowhead.shape: circle 18 | } 19 | } 20 | } 21 | 22 | api-1 23 | api-2 24 | 25 | api-1 -> postgres 26 | api-2 -> postgres 27 | 28 | postgres: { 29 | shape: cylinder 30 | } 31 | postgres -> external: { 32 | style.stroke: black 33 | } 34 | 35 | api-1 <-> api-2: { 36 | style.stroke: red 37 | style.stroke-dash: 2 38 | } 39 | api-1 -> api-3: { 40 | target-arrowhead.shape: circle 41 | } 42 | -------------------------------------------------------------------------------- /static/d2/links.d2: -------------------------------------------------------------------------------- 1 | x: I'm a Mac { 2 | link: https://apple.com 3 | } 4 | y: And I'm a PC { 5 | link: https://microsoft.com 6 | } 7 | x -> y: gazoontite { 8 | link: https://google.com 9 | } 10 | -------------------------------------------------------------------------------- /static/d2/markdown-label.d2: -------------------------------------------------------------------------------- 1 | explanation: |md 2 | # I can do headers 3 | - lists 4 | - lists 5 | 6 | And other normal markdown stuff 7 | | 8 | # Explicitly declare, even though the default shape is rectangle 9 | explanation.shape: rectangle 10 | -------------------------------------------------------------------------------- /static/d2/markdown.d2: -------------------------------------------------------------------------------- 1 | explanation: |md 2 | # I can do headers 3 | - lists 4 | - lists 5 | 6 | And other normal markdown stuff 7 | | 8 | -------------------------------------------------------------------------------- /static/d2/md-table.d2: -------------------------------------------------------------------------------- 1 | savings: ||md 2 | | Month | Savings | Expenses | Balance | 3 | | -------- | ------- | -------- | ------- | 4 | | January | $250 | $150 | $100 | 5 | | February | $80 | $200 | -$120 | 6 | | March | $420 | $180 | $240 | 7 | || 8 | -------------------------------------------------------------------------------- /static/d2/models.d2: -------------------------------------------------------------------------------- 1 | postgres: { 2 | shape: cylinder 3 | icon: https://icons.terrastruct.com/dev%2Fpostgresql.svg 4 | icon.near: bottom-center 5 | } 6 | it: IT Guy { 7 | shape: person 8 | style: { 9 | fill: maroon 10 | } 11 | } 12 | vpn: { 13 | style: { 14 | shadow: true 15 | } 16 | tooltip: IP is 192.2.2.1 17 | } 18 | -------------------------------------------------------------------------------- /static/d2/multiple-classes.d2: -------------------------------------------------------------------------------- 1 | classes: { 2 | d2: { 3 | label: "" 4 | icon: https://play.d2lang.com/assets/icons/d2-logo.svg 5 | } 6 | sphere: { 7 | shape: circle 8 | style.stroke-width: 0 9 | } 10 | } 11 | 12 | logo.class: [d2; sphere] 13 | -------------------------------------------------------------------------------- /static/d2/near-constant.d2: -------------------------------------------------------------------------------- 1 | title: |md 2 | # A winning strategy 3 | | {near: top-center} 4 | 5 | poll the people -> results 6 | results -> unfavorable -> poll the people 7 | results -> favorable -> will of the people 8 | -------------------------------------------------------------------------------- /static/d2/near-container.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | 3 | x -> y: { 4 | style.stroke: green 5 | } 6 | 7 | y -> z: { 8 | style.stroke: red 9 | } 10 | 11 | legend: { 12 | near: bottom-center 13 | color1: foo { 14 | shape: text 15 | style.font-color: green 16 | } 17 | 18 | color2: bar { 19 | shape: text 20 | style.font-color: red 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /static/d2/near-explanation.d2: -------------------------------------------------------------------------------- 1 | explanation: |md 2 | # LLMs 3 | The Large Language Model (LLM) is a powerful AI\ 4 | system that learns from vast amounts of text data.\ 5 | By analyzing patterns and structures in language,\ 6 | it gains an understanding of grammar, facts,\ 7 | and even some reasoning abilities. As users input text,\ 8 | the LLM predicts the most likely next words or phrases\ 9 | to create coherent responses. The model\ 10 | continuously fine-tunes its output, considering both the\ 11 | user's input and its own vast knowledge base.\ 12 | This cutting-edge technology enables LLM to generate human-like text,\ 13 | making it a valuable tool for various applications. 14 | | { 15 | near: center-left 16 | } 17 | 18 | ML Platform -> Pre-trained models 19 | ML Platform -> Model registry 20 | ML Platform -> Compiler 21 | ML Platform -> Validation 22 | ML Platform -> Auditing 23 | 24 | Model registry -> Server.Batch Predictor 25 | Server.Online Model Server 26 | -------------------------------------------------------------------------------- /static/d2/near-label-icon.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y 3 | 4 | x: worker { 5 | label.near: top-center 6 | icon: https://icons.terrastruct.com/essentials%2F005-programmer.svg 7 | icon.near: outside-top-right 8 | } 9 | 10 | y: profits { 11 | label.near: bottom-right 12 | icon: https://icons.terrastruct.com/essentials%2Fprofits.svg 13 | icon.near: outside-top-left 14 | } 15 | -------------------------------------------------------------------------------- /static/d2/non-markdown-text.d2: -------------------------------------------------------------------------------- 1 | title: A winning strategy { 2 | shape: text 3 | near: top-center 4 | style: { 5 | font-size: 55 6 | italic: true 7 | } 8 | } 9 | 10 | poll the people -> results 11 | results -> unfavorable -> poll the people 12 | results -> favorable -> will of the people 13 | -------------------------------------------------------------------------------- /static/d2/null-attribute.d2: -------------------------------------------------------------------------------- 1 | one: { 2 | style: { 3 | fill: pink 4 | stroke: green 5 | } 6 | } 7 | 8 | one.style.stroke: null 9 | -------------------------------------------------------------------------------- /static/d2/null-basic.d2: -------------------------------------------------------------------------------- 1 | one 2 | two 3 | 4 | one: null 5 | -------------------------------------------------------------------------------- /static/d2/null-connection.d2: -------------------------------------------------------------------------------- 1 | one -> two 2 | 3 | (one -> two)[0]: null 4 | -------------------------------------------------------------------------------- /static/d2/null-implicit-connection.d2: -------------------------------------------------------------------------------- 1 | one -> two 2 | 3 | two: null 4 | -------------------------------------------------------------------------------- /static/d2/null-implicit-descendant.d2: -------------------------------------------------------------------------------- 1 | one: { 2 | two: { 3 | three 4 | } 5 | } 6 | 7 | one.two: null 8 | -------------------------------------------------------------------------------- /static/d2/ordered-classes.d2: -------------------------------------------------------------------------------- 1 | classes: { 2 | uno: { 3 | label: 1 4 | } 5 | dos: { 6 | label: 2 7 | } 8 | } 9 | 10 | x.class: [uno; dos] 11 | y.class: [dos; uno] 12 | -------------------------------------------------------------------------------- /static/d2/overrides-1.d2: -------------------------------------------------------------------------------- 1 | visual studio code text editor 2 | visual studio code text editor: visual_studio_code_text_editor 3 | # Remember that shape keys are case insensitive 4 | visual studio CODE text editor: VisualStudioCodeTextEditor 5 | visual studio code TEXT editor: Visual Studio Code Text Editor 6 | visual STUDIO code text editor 7 | -------------------------------------------------------------------------------- /static/d2/overrides-2.d2: -------------------------------------------------------------------------------- 1 | aws_s3: AWS S3 California { 2 | Monitoring -> California 3 | } 4 | aws_s3: "AWS S3 San Francisco, California" { 5 | California.San Francisco 6 | } 7 | 8 | # Equal to: 9 | # aws_s3: "AWS S3 San Francisco, California" { 10 | # Monitoring -> California 11 | # California.San Francisco 12 | # } 13 | -------------------------------------------------------------------------------- /static/d2/people.d2: -------------------------------------------------------------------------------- 1 | management: { 2 | joe: { 3 | shape: person 4 | label: Joe Donutlover 5 | } 6 | jan: { 7 | shape: person 8 | label: Jan Donutbaker 9 | } 10 | } 11 | # Notice how these do not appear in the rendered diagram 12 | employees: { 13 | toby: { 14 | shape: person 15 | label: Toby Simonton 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /static/d2/pill.d2: -------------------------------------------------------------------------------- 1 | tylenol.style.border-radius: 999 2 | -------------------------------------------------------------------------------- /static/d2/sequence-diagrams-1.d2: -------------------------------------------------------------------------------- 1 | shape: sequence_diagram 2 | alice -> bob: What does it mean\nto be well-adjusted? 3 | bob -> alice: The ability to play bridge or\ngolf as if they were games. 4 | -------------------------------------------------------------------------------- /static/d2/sequence-diagrams-2.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | Before and after becoming friends: { 3 | 2007: Office chatter in 2007 { 4 | shape: sequence_diagram 5 | alice: Alice 6 | bob: Bobby 7 | awkward small talk: { 8 | alice -> bob: uhm, hi 9 | bob -> alice: oh, hello 10 | icebreaker attempt: { 11 | alice -> bob: what did you have for lunch? 12 | } 13 | unfortunate outcome: { 14 | bob -> alice: that's personal 15 | } 16 | } 17 | } 18 | 19 | 2012: Office chatter in 2012 { 20 | shape: sequence_diagram 21 | alice: Alice 22 | bob: Bobby 23 | alice -> bob: Want to play with ChatGPT? 24 | bob -> alice: Yes! 25 | bob -> alice.play: Write a play... 26 | alice.play -> bob.play: about 2 friends... 27 | bob.play -> alice.play: who find love... 28 | alice.play -> bob.play: in a sequence diagram 29 | } 30 | 31 | 2007 -> 2012: Five\nyears\nlater 32 | } 33 | -------------------------------------------------------------------------------- /static/d2/sequence-diagrams-3.d2: -------------------------------------------------------------------------------- 1 | shape: sequence_diagram 2 | alice.t1 -> bob 3 | alice.t2 -> bob.a 4 | alice.t2.a -> bob.a 5 | alice.t2.a <- bob.a 6 | alice.t2 <- bob.a 7 | -------------------------------------------------------------------------------- /static/d2/sequence-diagrams-4.d2: -------------------------------------------------------------------------------- 1 | shape: sequence_diagram 2 | scorer: {shape: person} 3 | scorer.t -> itemResponse.t: getItem() 4 | scorer.t <- itemResponse.t: item { 5 | style.stroke-dash: 5 6 | } 7 | 8 | scorer.t -> item.t1: getRubric() 9 | scorer.t <- item.t1: rubric { 10 | style.stroke-dash: 5 11 | } 12 | 13 | scorer.t -> essayRubric.t: applyTo(essayResp) 14 | itemResponse -> essayRubric.t.c 15 | essayRubric.t.c -> concept.t: match(essayResponse) 16 | scorer <- essayRubric.t: score { 17 | style.stroke-dash: 5 18 | } 19 | 20 | scorer.t -> itemOutcome.t1: new 21 | scorer.t -> item.t2: getNormalMinimum() 22 | scorer.t -> item.t3: getNormalMaximum() 23 | 24 | scorer.t -> itemOutcome.t2: setScore(score) 25 | scorer.t -> itemOutcome.t3: setFeedback(missingConcepts) 26 | -------------------------------------------------------------------------------- /static/d2/sequence-diagrams-group.d2: -------------------------------------------------------------------------------- 1 | shape: sequence_diagram 2 | # Predefine actors 3 | alice 4 | bob 5 | shower thoughts: { 6 | alice -> bob: A physicist is an atom's way of knowing about atoms. 7 | alice -> bob: Today is the first day of the rest of your life. 8 | } 9 | life advice: { 10 | bob -> alice: If all else fails, lower your standards. 11 | } 12 | -------------------------------------------------------------------------------- /static/d2/sequence-diagrams-lifeline.d2: -------------------------------------------------------------------------------- 1 | shape: sequence_diagram 2 | alice -> bob: What does it mean\nto be well-adjusted? 3 | bob -> alice: The ability to play bridge or\ngolf as if they were games. 4 | 5 | alice.style: { 6 | stroke: red 7 | stroke-dash: 0 8 | } 9 | -------------------------------------------------------------------------------- /static/d2/sequence-diagrams-note.d2: -------------------------------------------------------------------------------- 1 | shape: sequence_diagram 2 | alice -> bob 3 | bob."In the eyes of my dog, I'm a man." 4 | # Notes can go into groups, too 5 | important insight: { 6 | bob."Cold hands, no gloves." 7 | } 8 | bob -> alice: Chocolate chip. 9 | -------------------------------------------------------------------------------- /static/d2/sequence-diagrams-scope.d2: -------------------------------------------------------------------------------- 1 | Office chatter: { 2 | shape: sequence_diagram 3 | alice: Alice 4 | bob: Bobby 5 | awkward small talk: { 6 | alice -> bob: uhm, hi 7 | bob -> alice: oh, hello 8 | icebreaker attempt: { 9 | alice -> bob: what did you have for lunch? 10 | } 11 | unfortunate outcome: { 12 | bob -> alice: that's personal 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /static/d2/sequence-diagrams-self.d2: -------------------------------------------------------------------------------- 1 | shape: sequence_diagram 2 | son -> father: Can I borrow your car? 3 | friend -> father: Never lend your car to anyone to whom you have given birth. 4 | father -> father: internal debate ensues 5 | -------------------------------------------------------------------------------- /static/d2/shapes-1.d2: -------------------------------------------------------------------------------- 1 | imAShape 2 | im_a_shape 3 | im a shape 4 | i'm a shape 5 | # notice that one-hyphen is not a connection 6 | # whereas, `a--shape` would be a connection 7 | a-shape 8 | -------------------------------------------------------------------------------- /static/d2/shapes-2.d2: -------------------------------------------------------------------------------- 1 | pg: PostgreSQL 2 | Cloud: my cloud 3 | Cloud.shape: cloud 4 | SQLite 5 | Cassandra 6 | -------------------------------------------------------------------------------- /static/d2/shapes-3.d2: -------------------------------------------------------------------------------- 1 | # Shape catalog of standard shapes 2 | 3 | classes: { 4 | hidden: { 5 | label: "" 6 | style.fill: transparent 7 | style.stroke-width: 0 8 | } 9 | example: { 10 | style.fill: white 11 | width: 180 12 | height: 120 13 | style.font-size: 20 14 | style.bold: false 15 | } 16 | } 17 | 18 | style.fill: transparent 19 | 20 | grid-rows: 5 21 | grid-gap: 0 22 | 23 | one: { 24 | class: hidden 25 | rectangle.shape: rectangle 26 | square.shape: square 27 | page.shape: page 28 | parallelogram.shape: parallelogram 29 | 30 | # Color fixups to ensure all shapes have white fill 31 | # TODO change this to use globs when implemented 32 | rectangle.class: example 33 | square.class: example 34 | page.class: example 35 | parallelogram.class: example 36 | } 37 | 38 | two: { 39 | class: hidden 40 | document.shape: document 41 | cylinder.shape: cylinder 42 | queue.shape: queue 43 | package.shape: package 44 | 45 | document.class: example 46 | cylinder.class: example 47 | queue.class: example 48 | package.class: example 49 | } 50 | 51 | three: { 52 | class: hidden 53 | step.shape: step 54 | callout.shape: callout 55 | stored_data.shape: stored_data 56 | person.shape: person 57 | 58 | step.class: example 59 | callout.class: example 60 | stored_data.class: example 61 | person.class: example 62 | } 63 | 64 | four: { 65 | class: hidden 66 | diamond.shape: diamond 67 | oval.shape: oval 68 | circle.shape: circle 69 | hexagon.shape: hexagon 70 | 71 | diamond.class: example 72 | oval.class: example 73 | circle.class: example 74 | hexagon.class: example 75 | } 76 | 77 | five: { 78 | class: hidden 79 | cloud.shape: cloud 80 | cloud.class: example 81 | c4person.shape: c4-person 82 | c4person.class: example 83 | c4person.label: c4-person 84 | } 85 | -------------------------------------------------------------------------------- /static/d2/strings-1.d2: -------------------------------------------------------------------------------- 1 | Office Bulb: Philips 2 | Switch -> Office Bulb 3 | -------------------------------------------------------------------------------- /static/d2/strings-2.d2: -------------------------------------------------------------------------------- 1 | '$$$' -> "###" 2 | -------------------------------------------------------------------------------- /static/d2/style-classes-1.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | classes: { 3 | load balancer: { 4 | label: load\nbalancer 5 | width: 100 6 | height: 200 7 | style: { 8 | stroke-width: 0 9 | fill: "#44C7B1" 10 | shadow: true 11 | border-radius: 5 12 | } 13 | } 14 | unhealthy: { 15 | style: { 16 | fill: "#FE7070" 17 | stroke: "#F69E03" 18 | } 19 | } 20 | } 21 | 22 | web traffic -> web lb 23 | web lb.class: load balancer 24 | 25 | web lb -> api1 26 | web lb -> api2 27 | web lb -> api3 28 | 29 | api2.class: unhealthy 30 | 31 | api1 -> cache lb 32 | api3 -> cache lb 33 | 34 | cache lb.class: load balancer 35 | -------------------------------------------------------------------------------- /static/d2/style-classes-2.d2: -------------------------------------------------------------------------------- 1 | classes: { 2 | unhealthy: { 3 | style.fill: red 4 | } 5 | } 6 | x.class: unhealthy 7 | x.style.fill: orange 8 | -------------------------------------------------------------------------------- /static/d2/styles-3d.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi 3 | x.style.3d: true 4 | -------------------------------------------------------------------------------- /static/d2/styles-base.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi 3 | -------------------------------------------------------------------------------- /static/d2/styles-border-radius.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi 3 | x.style.border-radius: 3 4 | y.style.border-radius: 8 5 | -------------------------------------------------------------------------------- /static/d2/styles-double-border.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi 3 | x.style.double-border: true 4 | y.shape: circle 5 | y.style.double-border: true 6 | -------------------------------------------------------------------------------- /static/d2/styles-fill-pattern.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | style.fill-pattern: dots 3 | x -> y: hi 4 | x.style.fill-pattern: lines 5 | y.style.fill-pattern: grain 6 | -------------------------------------------------------------------------------- /static/d2/styles-fill-transparent.d2: -------------------------------------------------------------------------------- 1 | x: { 2 | y 3 | y.style.fill: transparent 4 | } 5 | x.style.fill: PapayaWhip 6 | -------------------------------------------------------------------------------- /static/d2/styles-fill.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi 3 | y -> z 4 | x.style.fill: "#f4a261" 5 | y.style.fill: honeydew 6 | z.style.fill: "linear-gradient(#f69d3c, #3f87a6)" 7 | -------------------------------------------------------------------------------- /static/d2/styles-font-color.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi { 3 | style: { 4 | font-color: red 5 | } 6 | } 7 | x.style.font-color: "#f4a261" 8 | -------------------------------------------------------------------------------- /static/d2/styles-font-size.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi { 3 | style: { 4 | font-size: 28 5 | } 6 | } 7 | x.style.font-size: 8 8 | y.style.font-size: 55 9 | -------------------------------------------------------------------------------- /static/d2/styles-font.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi { 3 | style: { 4 | font: mono 5 | } 6 | } 7 | x.style.font: mono 8 | y.style.font: mono 9 | -------------------------------------------------------------------------------- /static/d2/styles-multiple.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi 3 | x.style.multiple: true 4 | -------------------------------------------------------------------------------- /static/d2/styles-opacity.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi { 3 | style: { 4 | opacity: 0.4 5 | } 6 | } 7 | x.style.opacity: 0 8 | y.style.opacity: 0.7 9 | -------------------------------------------------------------------------------- /static/d2/styles-root.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi 3 | style: { 4 | fill: LightBlue 5 | stroke: FireBrick 6 | stroke-width: 2 7 | } 8 | -------------------------------------------------------------------------------- /static/d2/styles-shadow.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi 3 | x.style.shadow: true 4 | -------------------------------------------------------------------------------- /static/d2/styles-stroke-dash.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi { 3 | style: { 4 | stroke-dash: 3 5 | } 6 | } 7 | x.style.stroke-dash: 5 8 | -------------------------------------------------------------------------------- /static/d2/styles-stroke-width.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi { 3 | style: { 4 | stroke-width: 8 5 | } 6 | } 7 | x.style.stroke-width: 1 8 | -------------------------------------------------------------------------------- /static/d2/styles-stroke.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi { 3 | style: { 4 | # All CSS color names are valid 5 | stroke: deepskyblue 6 | } 7 | } 8 | # We need quotes for hex otherwise it gets interpreted as comment 9 | x.style.stroke: "#f4a261" 10 | -------------------------------------------------------------------------------- /static/d2/styles-table-color.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | costumes: { 3 | shape: sql_table 4 | id: int {constraint: primary_key} 5 | silliness: int 6 | last_updated: timestamp 7 | style.font-color: "#8AF5B0" 8 | } 9 | 10 | parser: { 11 | shape: class 12 | -lookahead: "[]rune" 13 | +peek(): (r rune, eof bool) 14 | rewind() 15 | commit() 16 | style.font-color: "#8AF5B0" 17 | } 18 | 19 | costumes -> parser 20 | -------------------------------------------------------------------------------- /static/d2/styles-table-fill.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | costumes: { 3 | shape: sql_table 4 | id: int {constraint: primary_key} 5 | silliness: int 6 | last_updated: timestamp 7 | style.fill: "#329241" 8 | } 9 | 10 | parser: { 11 | shape: class 12 | -lookahead: "[]rune" 13 | +peek(): (r rune, eof bool) 14 | rewind() 15 | commit() 16 | style.fill: "#329241" 17 | } 18 | 19 | costumes -> parser 20 | -------------------------------------------------------------------------------- /static/d2/styles-table-stroke.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | costumes: { 3 | shape: sql_table 4 | id: int {constraint: primary_key} 5 | silliness: int 6 | last_updated: timestamp 7 | style.stroke: "#E5F7FD" 8 | } 9 | 10 | parser: { 11 | shape: class 12 | -lookahead: "[]rune" 13 | +peek(): (r rune, eof bool) 14 | rewind() 15 | commit() 16 | style.stroke: "#E5F7FD" 17 | } 18 | 19 | costumes -> parser 20 | -------------------------------------------------------------------------------- /static/d2/styles-text-decoration.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | x -> y: hi { 3 | style: { 4 | bold: true 5 | } 6 | } 7 | x.style.underline: true 8 | y.style.italic: true 9 | # By default, shape labels are bold. Bold has precedence over italic, so unbold to see 10 | # italic style 11 | y.style.bold: false 12 | -------------------------------------------------------------------------------- /static/d2/styles-text-transform.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | TOM -> jerry: hi { 3 | style: { 4 | text-transform: capitalize 5 | } 6 | } 7 | TOM.style.text-transform: lowercase 8 | jerry.style.text-transform: uppercase 9 | -------------------------------------------------------------------------------- /static/d2/suspend-2.d2: -------------------------------------------------------------------------------- 1 | # ----- 2 | # Models 3 | # ----- 4 | restaurants: Restaurants { 5 | style.stroke-dash: 2 6 | *.style.fill: "#66c4e3" 7 | chip: Chipotle 8 | cfa: Chick-Fil-A 9 | bk: Burger King 10 | 11 | chip -> bk: competes with 12 | } 13 | 14 | diners: Diners { 15 | daniel 16 | zack 17 | } 18 | 19 | # ----- 20 | # Model Relationships 21 | # ----- 22 | diners -> restaurants: eat at 23 | 24 | diners.daniel -> restaurants.chip: likes 25 | diners.daniel -> restaurants.cfa: dislikes 26 | 27 | diners.zack -> restaurants.bk: likes 28 | diners.zack -> restaurants.chip: likes 29 | 30 | # Treat the above as models 31 | **: suspend 32 | (** -> **)[*]: suspend 33 | 34 | # Display only top level 35 | *: unsuspend 36 | (* -> *)[*]: unsuspend 37 | -------------------------------------------------------------------------------- /static/d2/suspend-3.d2: -------------------------------------------------------------------------------- 1 | # ----- 2 | # Models 3 | # ----- 4 | restaurants: Restaurants { 5 | style.stroke-dash: 2 6 | *.style.fill: "#66c4e3" 7 | chip: Chipotle 8 | cfa: Chick-Fil-A 9 | bk: Burger King 10 | 11 | chip -> bk: competes with 12 | } 13 | 14 | diners: Diners { 15 | daniel 16 | zack 17 | } 18 | 19 | # ----- 20 | # Model Relationships 21 | # ----- 22 | diners -> restaurants: eat at 23 | 24 | diners.daniel -> restaurants.chip: likes 25 | diners.daniel -> restaurants.cfa: dislikes 26 | 27 | diners.zack -> restaurants.bk: likes 28 | diners.zack -> restaurants.chip: likes 29 | 30 | # Treat the above as models 31 | **: suspend 32 | (** -> **)[*]: suspend 33 | 34 | # Display only models connected to bk and their relationships 35 | (** -> **)[*]: unsuspend { 36 | &dst: restaurants.bk 37 | } 38 | -------------------------------------------------------------------------------- /static/d2/suspend-4.d2: -------------------------------------------------------------------------------- 1 | # ----- 2 | # Models 3 | # ----- 4 | restaurants: Restaurants { 5 | style.stroke-dash: 2 6 | *.style.fill: "#66c4e3" 7 | chip: Chipotle 8 | cfa: Chick-Fil-A 9 | bk: Burger King 10 | 11 | chip -> bk: competes with 12 | } 13 | 14 | diners: Diners { 15 | daniel 16 | zack 17 | } 18 | 19 | # ----- 20 | # Model Relationships 21 | # ----- 22 | diners -> restaurants: eat at 23 | 24 | diners.daniel -> restaurants.chip: likes 25 | diners.daniel -> restaurants.cfa: dislikes 26 | 27 | diners.zack -> restaurants.bk: likes 28 | diners.zack -> restaurants.chip: likes 29 | 30 | # Treat the above as models 31 | **: suspend 32 | (** -> **)[*]: suspend 33 | 34 | # Display only who likes what 35 | (** -> **)[*]: unsuspend { 36 | &label: likes 37 | } 38 | -------------------------------------------------------------------------------- /static/d2/suspend.d2: -------------------------------------------------------------------------------- 1 | # ----- 2 | # Models 3 | # ----- 4 | restaurants: Restaurants { 5 | style.stroke-dash: 2 6 | *.style.fill: "#66c4e3" 7 | chip: Chipotle 8 | cfa: Chick-Fil-A 9 | bk: Burger King 10 | 11 | chip -> bk: competes with 12 | } 13 | 14 | diners: Diners { 15 | daniel 16 | zack 17 | } 18 | 19 | # ----- 20 | # Model Relationships 21 | # ----- 22 | diners -> restaurants: eat at 23 | 24 | diners.daniel -> restaurants.chip: likes 25 | diners.daniel -> restaurants.cfa: dislikes 26 | 27 | diners.zack -> restaurants.bk: likes 28 | diners.zack -> restaurants.chip: likes 29 | -------------------------------------------------------------------------------- /static/d2/table.d2: -------------------------------------------------------------------------------- 1 | # Specified so that objects are written in row-dominant order 2 | grid-rows: 2 3 | grid-columns: 4 4 | grid-gap: 0 5 | 6 | classes: { 7 | header: { 8 | style.underline: true 9 | } 10 | } 11 | 12 | Element.class: header 13 | Atomic Number.class: header 14 | Atomic Mass.class: header 15 | Melting Point.class: header 16 | 17 | Hydrogen 18 | 1 19 | "1.008" 20 | "-259.16" 21 | 22 | Carbon 23 | 6 24 | "12.011" 25 | 3500 26 | 27 | Oxygen 28 | 8 29 | "15.999" 30 | "-218.79" 31 | -------------------------------------------------------------------------------- /static/d2/tables-1.d2: -------------------------------------------------------------------------------- 1 | my_table: { 2 | shape: sql_table 3 | # This is defined using the shorthand syntax for labels discussed in the containers section. 4 | # But here it's for the type of a constraint. 5 | # The id field becomes a map that looks like {type: int; constraint: primary_key} 6 | id: int {constraint: primary_key} 7 | last_updated: timestamp with time zone 8 | } 9 | -------------------------------------------------------------------------------- /static/d2/tables-2.d2: -------------------------------------------------------------------------------- 1 | objects: { 2 | shape: sql_table 3 | id: int {constraint: primary_key} 4 | disk: int {constraint: foreign_key} 5 | 6 | json: jsonb {constraint: unique} 7 | last_updated: timestamp with time zone 8 | } 9 | 10 | disks: { 11 | shape: sql_table 12 | id: int {constraint: primary_key} 13 | } 14 | 15 | objects.disk -> disks.id 16 | -------------------------------------------------------------------------------- /static/d2/tables-3.d2: -------------------------------------------------------------------------------- 1 | cloud: { 2 | disks: { 3 | shape: sql_table 4 | id: int {constraint: primary_key} 5 | } 6 | blocks: { 7 | shape: sql_table 8 | id: int {constraint: primary_key} 9 | disk: int {constraint: foreign_key} 10 | blob: blob 11 | } 12 | blocks.disk -> disks.id 13 | 14 | AWS S3 Vancouver -> disks 15 | } 16 | -------------------------------------------------------------------------------- /static/d2/text-2.d2: -------------------------------------------------------------------------------- 1 | plankton -> formula: will steal 2 | formula: |latex 3 | \lim_{h \rightarrow 0 } \frac{f(x+h)-f(x)}{h} 4 | | 5 | -------------------------------------------------------------------------------- /static/d2/theme-table-2.d2: -------------------------------------------------------------------------------- 1 | vars: { 2 | d2-config: { 3 | theme-id: 100 4 | } 5 | } 6 | 7 | direction: right 8 | 9 | costumes: { 10 | shape: sql_table 11 | id: int {constraint: primary_key} 12 | silliness: int 13 | monster: int 14 | last_updated: timestamp 15 | } 16 | 17 | monsters: { 18 | shape: sql_table 19 | id: int {constraint: primary_key} 20 | movie: string 21 | weight: int 22 | last_updated: timestamp 23 | } 24 | 25 | costumes.monster -> monsters.id 26 | -------------------------------------------------------------------------------- /static/d2/theme-table.d2: -------------------------------------------------------------------------------- 1 | vars: { 2 | d2-config: { 3 | theme-id: 6 4 | } 5 | } 6 | 7 | direction: right 8 | 9 | costumes: { 10 | shape: sql_table 11 | id: int {constraint: primary_key} 12 | silliness: int 13 | monster: int 14 | last_updated: timestamp 15 | } 16 | 17 | monsters: { 18 | shape: sql_table 19 | id: int {constraint: primary_key} 20 | movie: string 21 | weight: int 22 | last_updated: timestamp 23 | } 24 | 25 | costumes.monster -> monsters.id 26 | -------------------------------------------------------------------------------- /static/d2/tooltip.d2: -------------------------------------------------------------------------------- 1 | x: {tooltip: Total abstinence is easier than perfect moderation} 2 | y: {tooltip: Gee, I feel kind of LIGHT in the head now,\nknowing I can't make my satellite dish PAYMENTS!} 3 | x -> y 4 | -------------------------------------------------------------------------------- /static/d2/unicode.d2: -------------------------------------------------------------------------------- 1 | a: |md 2 | 床前明月光， 3 | 4 | 疑是地上霜。 5 | 6 | 举头望明月， 7 | 8 | 低头思故乡。 9 | | 10 | 11 | b: "トマトが赤くなったのはなぜですか？\nBecause it saw the salad dressing!👩‍👩‍👧‍👶👩‍👩‍👧‍👶" { 12 | style.font-size: 55 13 | } 14 | 15 | c: ສະບາຍດີ (sabaai dii) - Lao 16 | d: ជំរាបសួរ (jomreab suor) - Khmer { 17 | style.font-size: 43 18 | } 19 | 20 | a -> b -> c 21 | a -> d 22 | -------------------------------------------------------------------------------- /static/d2/users-current.d2: -------------------------------------------------------------------------------- 1 | users: { 2 | shape: sql_table 3 | id: int {constraint: primary_key} 4 | email: int {constraint: foreign_key} 5 | name: string 6 | password: text 7 | created_at: timestamp 8 | last_updated: timestamp 9 | } 10 | 11 | emails: { 12 | shape: sql_table 13 | id: int {constraint: [primary_key; unique]} 14 | local: string 15 | domain: string 16 | verified: boolean 17 | } 18 | users.email -> emails.id 19 | -------------------------------------------------------------------------------- /static/d2/users-v0.1.d2: -------------------------------------------------------------------------------- 1 | users: { 2 | shape: sql_table 3 | id: int {constraint: primary_key} 4 | email: string 5 | name: string 6 | verified_email: boolean 7 | password: string 8 | created_at: timestamp 9 | } 10 | -------------------------------------------------------------------------------- /static/d2/vars-config.d2: -------------------------------------------------------------------------------- 1 | vars: { 2 | d2-config: { 3 | theme-id: 4 4 | dark-theme-id: 200 5 | pad: 0 6 | center: true 7 | sketch: true 8 | layout-engine: elk 9 | } 10 | } 11 | 12 | direction: right 13 | x -> y 14 | -------------------------------------------------------------------------------- /static/d2/vars-escaped.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | vars: { 3 | names: John and Joyce 4 | } 5 | a -> b: 'Send field ${names}' 6 | -------------------------------------------------------------------------------- /static/d2/vars-intro.d2: -------------------------------------------------------------------------------- 1 | direction: right 2 | vars: { 3 | server-name: Cat 4 | } 5 | 6 | server1: ${server-name}-1 7 | server2: ${server-name}-2 8 | 9 | server1 <-> server2 10 | -------------------------------------------------------------------------------- /static/d2/vars-nested.d2: -------------------------------------------------------------------------------- 1 | vars: { 2 | primaryColors: { 3 | button: { 4 | active: "#4baae5" 5 | border: black 6 | } 7 | } 8 | } 9 | 10 | button: { 11 | width: 100 12 | height: 40 13 | style: { 14 | border-radius: 5 15 | fill: ${primaryColors.button.active} 16 | stroke: ${primaryColors.button.border} 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /static/d2/vars-scoped.d2: -------------------------------------------------------------------------------- 1 | vars: { 2 | region: Global 3 | } 4 | 5 | lb: ${region} load balancer 6 | 7 | zone1: { 8 | vars: { 9 | region: us-east-1 10 | } 11 | server: ${region} API 12 | } 13 | -------------------------------------------------------------------------------- /static/d2/vars-spread.d2: -------------------------------------------------------------------------------- 1 | vars: { 2 | base-constraints: [NOT NULL; UNQ] 3 | disclaimer: DISCLAIMER { 4 | I am not a lawyer 5 | near: top-center 6 | } 7 | } 8 | 9 | data: { 10 | shape: sql_table 11 | a: int {constraint: [PK; ...${base-constraints}]} 12 | } 13 | 14 | custom-disclaimer: DRAFT DISCLAIMER { 15 | ...${disclaimer} 16 | } 17 | -------------------------------------------------------------------------------- /static/features/d2 docs icons updated/cheat sheet.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M4.53564 11.4632L11.4299 4.56894C13.4802 2.51869 16.8043 2.51869 18.8546 4.56894C20.9048 6.61919 20.9048 9.94331 18.8546 11.9936L10.8996 19.9485C9.53277 21.3153 7.31669 21.3153 5.94986 19.9485C4.58302 18.5817 4.58302 16.3656 5.94986 14.9988L13.9048 7.04381C14.5882 6.3604 15.6963 6.3604 16.3797 7.04381C17.0631 7.72723 17.0631 8.83527 16.3797 9.51869L9.48539 16.413" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | </svg> 4 | -------------------------------------------------------------------------------- /static/features/d2 docs icons updated/exports.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | <path d="M7 10L12 15L17 10" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 4 | <path d="M12 15V3" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 5 | </svg> 6 | -------------------------------------------------------------------------------- /static/features/d2 docs icons updated/extension.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M17 6C17 6.35064 16.9398 6.68722 16.8293 7L20 7C20.5523 7 21 7.44772 21 8V11.1707C20.6872 11.0602 20.3506 11 20 11C18.3431 11 17 12.3431 17 14C17 15.6569 18.3431 17 20 17C20.3506 17 20.6872 16.9398 21 16.8293V20C21 20.5523 20.5523 21 20 21H8C7.44772 21 7 20.5523 7 20V16.8293C6.68722 16.9398 6.35064 17 6 17C4.34315 17 3 15.6569 3 14C3 12.3431 4.34315 11 6 11C6.35064 11 6.68722 11.0602 7 11.1707V8C7 7.44772 7.44772 7 8 7L11.1707 7C11.0602 6.68722 11 6.35064 11 6C11 4.34315 12.3431 3 14 3C15.6569 3 17 4.34315 17 6Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | </svg> 4 | -------------------------------------------------------------------------------- /static/features/icons/api.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <g clip-path="url(#clip0_1990_13844)"> 3 | <path d="M5.06534 13.9054L7.39571 11.5751C7.55659 11.4142 7.81743 11.4142 7.97831 11.5751L12.6391 16.2358C12.7999 16.3967 12.7999 16.6575 12.6391 16.8184L10.3087 19.1488C8.86078 20.5967 6.51325 20.5967 5.06534 19.1488C3.61743 17.7009 3.61743 15.3534 5.06534 13.9054Z" stroke="#2E3346" stroke-width="1.05932"/> 4 | <path d="M4.69048 19.5214L3.19238 21.0195" stroke="#2E3346" stroke-width="1.05932" stroke-linecap="round"/> 5 | <path d="M11.8066 15.4023L13.3047 13.9042" stroke="#2E3346" stroke-width="1.05932" stroke-linecap="round"/> 6 | <path d="M8.81055 12.4062L10.3086 10.9081" stroke="#2E3346" stroke-width="1.05932" stroke-linecap="round"/> 7 | <path d="M18.7984 10.1336L16.4681 12.464C16.3072 12.6249 16.0463 12.6249 15.8855 12.464L11.2247 7.80323C11.0638 7.64235 11.0638 7.38152 11.2247 7.22064L13.5551 4.89026C15.003 3.44235 17.3505 3.44235 18.7984 4.89026C20.2463 6.33817 20.2463 8.6857 18.7984 10.1336Z" stroke="#2E3346" stroke-width="1.05932"/> 8 | <path d="M19.1733 4.51373L20.6714 3.01562" stroke="#2E3346" stroke-width="1.05932" stroke-linecap="round"/> 9 | </g> 10 | <defs> 11 | <clipPath id="clip0_1990_13844"> 12 | <rect width="24" height="24" fill="white"/> 13 | </clipPath> 14 | </defs> 15 | </svg> 16 | -------------------------------------------------------------------------------- /static/features/icons/autoformat.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 6C2.5 5.72386 2.72386 5.5 3 5.5H19C19.2761 5.5 19.5 5.72386 19.5 6C19.5 6.27614 19.2761 6.5 19 6.5H3C2.72386 6.5 2.5 6.27614 2.5 6ZM3 9.5C2.72386 9.5 2.5 9.72386 2.5 10C2.5 10.2761 2.72386 10.5 3 10.5H13C13.2761 10.5 13.5 10.2761 13.5 10C13.5 9.72386 13.2761 9.5 13 9.5H3ZM2.5 14C2.5 13.7239 2.72386 13.5 3 13.5H11C11.2761 13.5 11.5 13.7239 11.5 14C11.5 14.2761 11.2761 14.5 11 14.5H3C2.72386 14.5 2.5 14.2761 2.5 14ZM2.5 18C2.5 17.7239 2.72386 17.5 3 17.5H15C15.2761 17.5 15.5 17.7239 15.5 18C15.5 18.2761 15.2761 18.5 15 18.5H3C2.72386 18.5 2.5 18.2761 2.5 18ZM18.5 8C18.5 7.77328 18.3475 7.57494 18.1283 7.51675C17.9092 7.45856 17.6784 7.55509 17.5659 7.75193L13.5659 14.7519C13.4774 14.9067 13.4781 15.0968 13.5675 15.251C13.657 15.4051 13.8218 15.5 14 15.5H17V19.5C17 19.7294 17.1561 19.9294 17.3787 19.9851C17.6013 20.0407 17.8332 19.9377 17.9412 19.7353L21.9412 12.2353C22.0238 12.0803 22.0191 11.8934 21.9287 11.7428C21.8384 11.5921 21.6756 11.5 21.5 11.5H18.5V8ZM17.5 14.5H14.8616L17.5 9.88278V12C17.5 12.2761 17.7239 12.5 18 12.5H20.6667L18 17.5V15C18 14.7239 17.7761 14.5 17.5 14.5Z" fill="#2E3346"/> 3 | </svg> 4 | -------------------------------------------------------------------------------- /static/features/icons/cheat-sheet.svg: -------------------------------------------------------------------------------- 1 | <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M4.86914 11.4632L11.7634 4.56894C13.8137 2.51869 17.1378 2.51869 19.1881 4.56894C21.2383 6.61919 21.2383 9.94331 19.1881 11.9936L11.2331 19.9485C9.86627 21.3153 7.65019 21.3153 6.28335 19.9485C4.91652 18.5817 4.91652 16.3656 6.28335 14.9988L14.2383 7.04381C14.9217 6.3604 16.0298 6.3604 16.7132 7.04381C17.3966 7.72723 17.3966 8.83527 16.7132 9.51869L9.81889 16.413" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | </svg> 4 | -------------------------------------------------------------------------------- /static/features/icons/classes.svg: -------------------------------------------------------------------------------- 1 | <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M3.6665 6L21.6665 6" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | <path d="M4.66651 20L20.6665 20C21.2188 20 21.6665 19.5523 21.6665 19L21.6665 5C21.6665 4.44771 21.2188 4 20.6665 4L4.6665 4C4.11422 4 3.6665 4.44772 3.6665 5L3.66651 19C3.66651 19.5523 4.11422 20 4.66651 20Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 4 | <path d="M17.6665 9H19.6665" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 5 | <path d="M17.6665 12H19.6665" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 6 | <path d="M17.6665 17H19.6665" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 7 | <path d="M9.6665 9H15.6665" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 8 | <path d="M9.6665 12H15.6665" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 9 | <path d="M9.6665 17H15.6665" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 10 | <path d="M6.6665 9H5.6665" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 11 | <path d="M6.6665 12H5.6665" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 12 | <path d="M6.6665 17H5.6665" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 13 | </svg> 14 | -------------------------------------------------------------------------------- /static/features/icons/cli.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M3 7L21 7" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | <path d="M4 20L20 20C20.5523 20 21 19.5523 21 19L21 5C21 4.44771 20.5523 4 20 4L4 4C3.44772 4 3 4.44772 3 5L3 19C3 19.5523 3.44772 20 4 20Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 4 | <path d="M16 16H13" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 5 | <path d="M8 12L10 14L8 16" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 6 | </svg> 7 | -------------------------------------------------------------------------------- /static/features/icons/containers.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M21 16.0019V8.00186C20.9996 7.65113 20.9071 7.30667 20.7315 7.00302C20.556 6.69937 20.3037 6.44722 20 6.27186L13 2.27186C12.696 2.09632 12.3511 2.00391 12 2.00391C11.6489 2.00391 11.304 2.09632 11 2.27186L4 6.27186C3.69626 6.44722 3.44398 6.69937 3.26846 7.00302C3.09294 7.30667 3.00036 7.65113 3 8.00186V16.0019C3.00036 16.3526 3.09294 16.697 3.26846 17.0007C3.44398 17.3043 3.69626 17.5565 4 17.7319L11 21.7319C11.304 21.9074 11.6489 21.9998 12 21.9998C12.3511 21.9998 12.696 21.9074 13 21.7319L20 17.7319C20.3037 17.5565 20.556 17.3043 20.7315 17.0007C20.9071 16.697 20.9996 16.3526 21 16.0019Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | <path d="M3.27002 6.96094L12 12.0109L20.73 6.96094" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 4 | <path d="M12 22.08V12" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 5 | </svg> 6 | -------------------------------------------------------------------------------- /static/features/icons/dark_mode.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M20.9999 12.79C20.8426 14.4922 20.2038 16.1144 19.1581 17.4668C18.1125 18.8192 16.7034 19.8458 15.0956 20.4265C13.4878 21.0073 11.7479 21.1181 10.0794 20.7461C8.41092 20.3741 6.8829 19.5345 5.67413 18.3258C4.46536 17.117 3.62584 15.589 3.25381 13.9205C2.88178 12.252 2.99262 10.5121 3.57336 8.9043C4.15411 7.29651 5.18073 5.88737 6.53311 4.84175C7.8855 3.79614 9.5077 3.15731 11.2099 3C10.2133 4.34827 9.73375 6.00945 9.85843 7.68141C9.98312 9.35338 10.7038 10.9251 11.8893 12.1106C13.0748 13.2961 14.6465 14.0168 16.3185 14.1415C17.9905 14.2662 19.6516 13.7866 20.9999 12.79V12.79Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | </svg> 4 | -------------------------------------------------------------------------------- /static/features/icons/exports.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M8 21H16" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | <path d="M12 17V21" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 4 | <path d="M20 3H4C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H20C21.1046 17 22 16.1046 22 15V5C22 3.89543 21.1046 3 20 3Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 5 | <path d="M15 10L12 7L9 10" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 6 | <path d="M12 13V7" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 7 | </svg> 8 | -------------------------------------------------------------------------------- /static/features/icons/extension.svg: -------------------------------------------------------------------------------- 1 | <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M17.6665 6C17.6665 6.35064 17.6063 6.68722 17.4958 7L20.6665 7C21.2188 7 21.6665 7.44772 21.6665 8V11.1707C21.3537 11.0602 21.0171 11 20.6665 11C19.0096 11 17.6665 12.3431 17.6665 14C17.6665 15.6569 19.0096 17 20.6665 17C21.0171 17 21.3537 16.9398 21.6665 16.8293V20C21.6665 20.5523 21.2188 21 20.6665 21H8.66651C8.11422 21 7.66651 20.5523 7.66651 20V16.8293C7.35373 16.9398 7.01714 17 6.6665 17C5.00965 17 3.6665 15.6569 3.6665 14C3.6665 12.3431 5.00965 11 6.6665 11C7.01714 11 7.35373 11.0602 7.66651 11.1707V8C7.66651 7.44772 8.11422 7 8.66651 7L11.8372 7C11.7267 6.68722 11.6665 6.35064 11.6665 6C11.6665 4.34315 13.0096 3 14.6665 3C16.3234 3 17.6665 4.34315 17.6665 6Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | </svg> 4 | -------------------------------------------------------------------------------- /static/features/icons/fonts.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M9 19H15" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | <path d="M12 5V19" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 4 | <path d="M6 7V5H18V7" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 5 | </svg> 6 | -------------------------------------------------------------------------------- /static/features/icons/images.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | <path d="M21 15L16 10L5 21" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 4 | <path d="M8.5 10C9.32843 10 10 9.32843 10 8.5C10 7.67157 9.32843 7 8.5 7C7.67157 7 7 7.67157 7 8.5C7 9.32843 7.67157 10 8.5 10Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 5 | </svg> 6 | -------------------------------------------------------------------------------- /static/features/icons/import.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M4.3501 5C3.88597 5 3.44085 5.17643 3.11266 5.49049C2.78447 5.80454 2.6001 6.23049 2.6001 6.67463V19.0373C2.6001 20.3974 3.71939 21.5 5.1001 21.5H14.8501" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | <path d="M13.3501 19.75H6.1001C5.63597 19.75 5.19085 19.5688 4.86266 19.25C4.53447 18.9312 4.3501 18.5009 4.3501 18.05V4.7C4.3501 4.24913 4.53447 3.81673 4.86266 3.49792C5.19085 3.17911 5.63597 3 6.1001 3H13.3501L18.3501 9V13.65" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 4 | <path d="M13.3501 3V9H18.3501" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 5 | <path d="M17.3501 22C19.5592 22 21.3501 20.2091 21.3501 18C21.3501 15.7909 19.5592 14 17.3501 14C15.141 14 13.3501 15.7909 13.3501 18C13.3501 20.2091 15.141 22 17.3501 22Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 6 | <path d="M15.6836 18L17.3503 19.6667L19.0169 18" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 7 | <path d="M17.3501 16.332V19.6654" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 8 | </svg> 9 | -------------------------------------------------------------------------------- /static/features/icons/languages.svg: -------------------------------------------------------------------------------- 1 | <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M12.3335 22C17.8563 22 22.3335 17.5228 22.3335 12C22.3335 6.47715 17.8563 2 12.3335 2C6.81065 2 2.3335 6.47715 2.3335 12C2.3335 17.5228 6.81065 22 12.3335 22Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | <path d="M2.3335 12H22.3335" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 4 | <path d="M12.3335 2C14.8348 4.73835 16.2562 8.29203 16.3335 12C16.2562 15.708 14.8348 19.2616 12.3335 22C9.83222 19.2616 8.41074 15.708 8.3335 12C8.41074 8.29203 9.83222 4.73835 12.3335 2V2Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 5 | </svg> 6 | -------------------------------------------------------------------------------- /static/features/icons/markdown.svg: -------------------------------------------------------------------------------- 1 | <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M20.6665 3H4.6665C4.11422 3 3.6665 3.44772 3.6665 4V20C3.6665 20.5523 4.11422 21 4.6665 21H20.6665C21.2188 21 21.6665 20.5523 21.6665 20V4C21.6665 3.44772 21.2188 3 20.6665 3Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | <path d="M6.6665 15V9H7.52365L9.6665 12.8571L11.8094 9H12.6665V15" stroke="#2E3346" stroke-linecap="square"/> 4 | <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6665 9V8.5H16.6665V9V13H15.1665L17.1665 15.5L19.1665 13H17.6665V9Z" fill="#2E3346"/> 5 | </svg> 6 | -------------------------------------------------------------------------------- /static/features/icons/os.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M10 9V4C10 3.44772 10.4477 3 11 3H20C20.5523 3 21 3.44772 21 4V11C21 11.5523 20.5523 12 20 12H3M21 6H10M4 20H16C16.5523 20 17 19.5523 17 19V10C17 9.44772 16.5523 9 16 9H4C3.44772 9 3 9.44771 3 10V19C3 19.5523 3.44772 20 4 20Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | </svg> 4 | -------------------------------------------------------------------------------- /static/features/icons/playground.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <rect x="3.00049" y="3" width="17.9995" height="17.9995" rx="1" stroke="#2E3346"/> 3 | <circle cx="7.02987" cy="8.02987" r="1.02987" fill="#2E3346"/> 4 | <circle cx="16.9854" cy="8.02987" r="1.02987" fill="#2E3346"/> 5 | <path d="M10.4629 9.05859C10.5736 9.40188 11.083 10.0885 12.2347 10.0885C13.3864 10.0885 13.822 9.40188 13.8958 9.05859" stroke="#2E3346" stroke-linecap="round"/> 6 | </svg> 7 | -------------------------------------------------------------------------------- /static/features/icons/tables.svg: -------------------------------------------------------------------------------- 1 | <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M19.3335 4H5.3335C4.78121 4 4.3335 4.44772 4.3335 5V19C4.3335 19.5523 4.78121 20 5.3335 20H19.3335C19.8858 20 20.3335 19.5523 20.3335 19V5C20.3335 4.44772 19.8858 4 19.3335 4Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | <path d="M12.3335 4V20" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 4 | <path d="M20.3335 15L4.3335 15" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 5 | <path d="M20.3335 9L4.3335 9" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 6 | </svg> 7 | -------------------------------------------------------------------------------- /static/features/icons/tooltip.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M18.5769 4H5.42308C3.80871 4 2.5 4.89543 2.5 6V15C2.5 16.1046 3.80871 17 5.42308 17H8.71154L12 21L15.2885 17H18.5769C20.1913 17 21.5 16.1046 21.5 15V6C21.5 4.89543 20.1913 4 18.5769 4Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | <path d="M6.5 8.5H17" stroke="#2E3346" stroke-linecap="round"/> 4 | <path d="M6.5 13H17" stroke="#2E3346" stroke-linecap="round"/> 5 | </svg> 6 | -------------------------------------------------------------------------------- /static/features/icons/vscode.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M16.6099 20.1117V3.88528C16.6099 3.56491 16.9419 3.35242 17.2328 3.48664L20.4899 4.98944C20.8009 5.13294 21.0001 5.44419 21.0001 5.78672V18.4096C21.0001 18.7687 20.7815 19.0915 20.4482 19.2249L17.2119 20.5194C16.9236 20.6347 16.6099 20.4223 16.6099 20.1117Z" stroke="#2E3346"/> 3 | <path d="M16.2885 20.7062C16.5 20.8836 16.8154 20.856 16.9929 20.6444C17.1703 20.4328 17.1426 20.1174 16.9311 19.94L16.2885 20.7062ZM3.73435 9.52435L3.41304 9.90744L3.73435 9.52435ZM4.03128 8.58427L4.5744 8.04115L3.86729 7.33404L3.32417 7.87717L4.03128 8.58427ZM5.06675 8.00469L16.3121 16.3346L16.9074 15.5311L5.66197 7.20113L5.06675 8.00469ZM16.9311 19.94L4.05566 9.14125L3.41304 9.90744L16.2885 20.7062L16.9311 19.94ZM4.5744 8.04115C4.70683 7.90872 4.91625 7.89321 5.06675 8.00469L5.66197 7.20113C5.11341 6.79478 4.35002 6.85132 3.86729 7.33404L4.5744 8.04115ZM3.32417 7.87717C2.7524 8.44893 2.7935 9.38783 3.41304 9.90744L4.05566 9.14125C3.88569 8.9987 3.87442 8.74113 4.03128 8.58427L3.32417 7.87717Z" fill="#2E3346"/> 4 | <path d="M6.5122 11.9805L3.70632 14.4356C3.32407 14.7701 3.30449 15.3581 3.66364 15.7173L4.2352 16.2888C4.53647 16.5901 5.01055 16.6316 5.3596 16.3873L9.14634 13.7366" stroke="#2E3346"/> 5 | <path d="M16.6097 3.63672L12.4389 6.9294L10.3536 8.57574L9.31089 9.39892L8.78955 9.8105M16.6097 8.02696L11.3414 11.9782" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 6 | </svg> 7 | -------------------------------------------------------------------------------- /static/fonts/SourceSansPro/SourceSansPro-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/fonts/SourceSansPro/SourceSansPro-Black.ttf -------------------------------------------------------------------------------- /static/fonts/SourceSansPro/SourceSansPro-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/fonts/SourceSansPro/SourceSansPro-BlackItalic.ttf -------------------------------------------------------------------------------- /static/fonts/SourceSansPro/SourceSansPro-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/fonts/SourceSansPro/SourceSansPro-Bold.ttf -------------------------------------------------------------------------------- /static/fonts/SourceSansPro/SourceSansPro-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/fonts/SourceSansPro/SourceSansPro-BoldItalic.ttf -------------------------------------------------------------------------------- /static/fonts/SourceSansPro/SourceSansPro-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/fonts/SourceSansPro/SourceSansPro-ExtraLight.ttf -------------------------------------------------------------------------------- /static/fonts/SourceSansPro/SourceSansPro-ExtraLightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/fonts/SourceSansPro/SourceSansPro-ExtraLightItalic.ttf -------------------------------------------------------------------------------- /static/fonts/SourceSansPro/SourceSansPro-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/fonts/SourceSansPro/SourceSansPro-Italic.ttf -------------------------------------------------------------------------------- /static/fonts/SourceSansPro/SourceSansPro-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/fonts/SourceSansPro/SourceSansPro-Light.ttf -------------------------------------------------------------------------------- /static/fonts/SourceSansPro/SourceSansPro-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/fonts/SourceSansPro/SourceSansPro-LightItalic.ttf -------------------------------------------------------------------------------- /static/fonts/SourceSansPro/SourceSansPro-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/fonts/SourceSansPro/SourceSansPro-Regular.ttf -------------------------------------------------------------------------------- /static/fonts/SourceSansPro/SourceSansPro-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/fonts/SourceSansPro/SourceSansPro-SemiBold.ttf -------------------------------------------------------------------------------- /static/fonts/SourceSansPro/SourceSansPro-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/fonts/SourceSansPro/SourceSansPro-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /static/icons/checkcircle.svg: -------------------------------------------------------------------------------- 1 | <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M1.83398 8.00016C1.83398 4.59441 4.5949 1.8335 8.00065 1.8335C11.4064 1.8335 14.1673 4.59441 14.1673 8.00016C14.1673 11.4059 11.4064 14.1668 8.00065 14.1668C4.5949 14.1668 1.83398 11.4059 1.83398 8.00016ZM8.00065 0.833496C4.04261 0.833496 0.833984 4.04212 0.833984 8.00016C0.833984 11.9582 4.04261 15.1668 8.00065 15.1668C11.9587 15.1668 15.1673 11.9582 15.1673 8.00016C15.1673 4.04212 11.9587 0.833496 8.00065 0.833496ZM11.4657 6.02038C11.661 5.82512 11.661 5.50854 11.4657 5.31328C11.2705 5.11801 10.9539 5.11801 10.7586 5.31328L6.83442 9.2375L5.24353 7.64661C5.04826 7.45135 4.73168 7.45135 4.53642 7.64661C4.34116 7.84187 4.34116 8.15845 4.53642 8.35372L6.48086 10.2982C6.67613 10.4934 6.99271 10.4934 7.18797 10.2982L11.4657 6.02038Z" fill="#234CDA"/> 3 | </svg> 4 | -------------------------------------------------------------------------------- /static/icons/clipboard.svg: -------------------------------------------------------------------------------- 1 | <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M8 2H9C9.26522 2 9.51957 2.10536 9.70711 2.29289C9.89464 2.48043 10 2.73478 10 3V10C10 10.2652 9.89464 10.5196 9.70711 10.7071C9.51957 10.8946 9.26522 11 9 11H3C2.73478 11 2.48043 10.8946 2.29289 10.7071C2.10536 10.5196 2 10.2652 2 10V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H4" stroke="#234CDA" stroke-linecap="round" stroke-linejoin="round"/> 3 | <path d="M7.5 1H4.5C4.22386 1 4 1.22386 4 1.5V2.5C4 2.77614 4.22386 3 4.5 3H7.5C7.77614 3 8 2.77614 8 2.5V1.5C8 1.22386 7.77614 1 7.5 1Z" stroke="#234CDA" stroke-linecap="round" stroke-linejoin="round"/> 4 | </svg> 5 | -------------------------------------------------------------------------------- /static/icons/externallink.svg: -------------------------------------------------------------------------------- 1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M10.5 6H4.5C3.67157 6 3 6.67157 3 7.5V19.5C3 20.3284 3.67157 21 4.5 21H16.5C17.3284 21 18 20.3285 18 19.5001C18 17.9834 18 15.5737 18 13.5" stroke="#234CDA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 3 | <path d="M9.5 14.5L21 3" stroke="#234CDA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 4 | <path d="M14.5 3H21V9.5" stroke="#234CDA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 5 | </svg> 6 | -------------------------------------------------------------------------------- /static/img/blog/dark_mode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/blog/dark_mode.png -------------------------------------------------------------------------------- /static/img/blog/sketch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/blog/sketch.png -------------------------------------------------------------------------------- /static/img/color-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/color-code.png -------------------------------------------------------------------------------- /static/img/d2_discord.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/d2_discord.png -------------------------------------------------------------------------------- /static/img/d2_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/d2_logo.png -------------------------------------------------------------------------------- /static/img/d2_slack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/d2_slack.png -------------------------------------------------------------------------------- /static/img/directory/circles.svg: -------------------------------------------------------------------------------- 1 | <svg width="592" height="240" viewBox="0 0 592 240" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <g opacity="0.75" filter="url(#filter0_b_1935_13932)"> 3 | <circle cx="296" cy="120" r="255" fill="url(#paint0_linear_1935_13932)"/> 4 | </g> 5 | <g opacity="0.75" filter="url(#filter1_b_1935_13932)"> 6 | <circle cx="296" cy="120" r="295.305" stroke="url(#paint1_linear_1935_13932)" stroke-width="1.39073"/> 7 | </g> 8 | <defs> 9 | <filter id="filter0_b_1935_13932" x="-59" y="-235" width="710" height="710" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> 10 | <feFlood flood-opacity="0" result="BackgroundImageFix"/> 11 | <feGaussianBlur in="BackgroundImageFix" stdDeviation="50"/> 12 | <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1935_13932"/> 13 | <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1935_13932" result="shape"/> 14 | </filter> 15 | <filter id="filter1_b_1935_13932" x="-115.894" y="-291.894" width="823.788" height="823.788" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> 16 | <feFlood flood-opacity="0" result="BackgroundImageFix"/> 17 | <feGaussianBlur in="BackgroundImageFix" stdDeviation="57.947"/> 18 | <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1935_13932"/> 19 | <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1935_13932" result="shape"/> 20 | </filter> 21 | <linearGradient id="paint0_linear_1935_13932" x1="296.475" y1="375" x2="296.475" y2="-121.229" gradientUnits="userSpaceOnUse"> 22 | <stop stop-color="white"/> 23 | <stop offset="0.533196" stop-color="white" stop-opacity="0"/> 24 | </linearGradient> 25 | <linearGradient id="paint1_linear_1935_13932" x1="296" y1="62.7603" x2="296" y2="393.166" gradientUnits="userSpaceOnUse"> 26 | <stop stop-color="white" stop-opacity="0"/> 27 | <stop offset="1" stop-color="white"/> 28 | </linearGradient> 29 | </defs> 30 | </svg> 31 | -------------------------------------------------------------------------------- /static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/favicon.ico -------------------------------------------------------------------------------- /static/img/generated/c4.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/generated/c4.pdf -------------------------------------------------------------------------------- /static/img/generated/cat.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/generated/cat.pdf -------------------------------------------------------------------------------- /static/img/generated/cult.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/generated/cult.pptx -------------------------------------------------------------------------------- /static/img/generated/imports-nested.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/generated/imports-nested.pdf -------------------------------------------------------------------------------- /static/img/generated/lotr.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/generated/lotr.pdf -------------------------------------------------------------------------------- /static/img/generated/tiktok.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/generated/tiktok.pdf -------------------------------------------------------------------------------- /static/img/generated/triple-glob.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/generated/triple-glob.pdf -------------------------------------------------------------------------------- /static/img/generated/wcc.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/generated/wcc.pptx -------------------------------------------------------------------------------- /static/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/logo.png -------------------------------------------------------------------------------- /static/img/logo_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/logo_dark.png -------------------------------------------------------------------------------- /static/img/opengraph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/opengraph.png -------------------------------------------------------------------------------- /static/img/rss.svg: -------------------------------------------------------------------------------- 1 | <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M2 5.5C3.19347 5.5 4.33807 5.97411 5.18198 6.81802C6.02589 7.66193 6.5 8.80653 6.5 10" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 3 | <path d="M2 2C4.12173 2 6.15656 2.84285 7.65685 4.34315C9.15715 5.84344 10 7.87827 10 10" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 4 | <path d="M2.5 10C2.77614 10 3 9.77614 3 9.5C3 9.22386 2.77614 9 2.5 9C2.22386 9 2 9.22386 2 9.5C2 9.77614 2.22386 10 2.5 10Z" stroke="#2E3346" stroke-linecap="round" stroke-linejoin="round"/> 5 | </svg> 6 | -------------------------------------------------------------------------------- /static/img/screenshots/automatable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/automatable.png -------------------------------------------------------------------------------- /static/img/screenshots/cheatsheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/cheatsheet.png -------------------------------------------------------------------------------- /static/img/screenshots/cli.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/cli.gif -------------------------------------------------------------------------------- /static/img/screenshots/confluence.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/confluence.mp4 -------------------------------------------------------------------------------- /static/img/screenshots/cult_pptx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/cult_pptx.png -------------------------------------------------------------------------------- /static/img/screenshots/d2_studio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/d2_studio.png -------------------------------------------------------------------------------- /static/img/screenshots/discord.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/discord.mp4 -------------------------------------------------------------------------------- /static/img/screenshots/freeform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/freeform.png -------------------------------------------------------------------------------- /static/img/screenshots/graph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/graph.png -------------------------------------------------------------------------------- /static/img/screenshots/intro-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/intro-header.png -------------------------------------------------------------------------------- /static/img/screenshots/linked_pdf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/linked_pdf.png -------------------------------------------------------------------------------- /static/img/screenshots/markdown-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/markdown-2.png -------------------------------------------------------------------------------- /static/img/screenshots/obsidian.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/obsidian.mp4 -------------------------------------------------------------------------------- /static/img/screenshots/sequence_glossary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/sequence_glossary.png -------------------------------------------------------------------------------- /static/img/screenshots/slack-test.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/slack-test.mp4 -------------------------------------------------------------------------------- /static/img/screenshots/slack.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/slack.mp4 -------------------------------------------------------------------------------- /static/img/screenshots/tala-direction.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/tala-direction.png -------------------------------------------------------------------------------- /static/img/screenshots/text-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/text-2.png -------------------------------------------------------------------------------- /static/img/screenshots/themes/dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/themes/dark.png -------------------------------------------------------------------------------- /static/img/screenshots/themes/theme_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/themes/theme_2.png -------------------------------------------------------------------------------- /static/img/screenshots/themes/theme_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/themes/theme_3.png -------------------------------------------------------------------------------- /static/img/screenshots/themes/theme_overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/themes/theme_overview.png -------------------------------------------------------------------------------- /static/img/screenshots/tooltip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/tooltip.png -------------------------------------------------------------------------------- /static/img/screenshots/wcc_pptx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrastruct/d2-docs/b313c9a0d65120be9800cba0b7b592f628fde3f6/static/img/screenshots/wcc_pptx.png -------------------------------------------------------------------------------- /static/layout_gallery/sample1.d2: -------------------------------------------------------------------------------- 1 | runner: JobRunner { 2 | shape: class 3 | 4 | -start: datetime 5 | -end: datetime 6 | -running_server: string 7 | -threads: int 8 | -manager: JobsManager 9 | +pipeline: Pipeline 10 | 11 | +setPipeline(Pipeline p): void 12 | +kickoff(threads int): bool 13 | } 14 | 15 | jobsUI: JobRunner UI { 16 | kickoff 17 | halt 18 | } 19 | 20 | batch: Batch { 21 | manager: BatchManager { 22 | shape: class 23 | -num: int 24 | -timeout: int 25 | -pid 26 | 27 | +getStatus(): Enum 28 | +getJobs(): "Job[]" 29 | +setTimeout(seconds int) 30 | } 31 | systemd: Systemd 32 | selenium: Selenium 33 | 34 | systemd -> manager: Ensure alive 35 | manager -> selenium: Run job 36 | } 37 | 38 | jobsUI -> runner: Kick off 39 | runner -> batch.manager: Queue jobs 40 | -------------------------------------------------------------------------------- /static/layout_gallery/sample2.d2: -------------------------------------------------------------------------------- 1 | logs: { 2 | shape: page 3 | style.multiple: true 4 | } 5 | user: AT&T Customer {shape: person} 6 | network: Network { 7 | tower: Cell Tower { 8 | satellites: { 9 | shape: stored_data 10 | style.multiple: true 11 | } 12 | transmitter 13 | 14 | satellites -> transmitter 15 | satellites -> transmitter 16 | satellites -> transmitter 17 | } 18 | processor: Data Processor { 19 | storage: Storage { 20 | shape: cylinder 21 | style.multiple: true 22 | } 23 | } 24 | portal: Online Portal { 25 | UI 26 | } 27 | 28 | tower.transmitter -> processor: phone logs 29 | } 30 | server: API Server 31 | 32 | user -> network.tower: Make call 33 | network.processor -> server 34 | network.processor -> server 35 | network.processor -> server 36 | 37 | server -> logs 38 | server -> logs 39 | server -> logs: persist 40 | 41 | server -> network.portal.UI: display 42 | user -> network.portal.UI: access { 43 | style.stroke-dash: 3 44 | } 45 | -------------------------------------------------------------------------------- /static/layout_gallery/sample3.d2: -------------------------------------------------------------------------------- 1 | SSR: Server side render { 2 | templates: User defined templates 3 | 4 | tests: Validation tests 5 | 6 | engine: Rendering Engine\n API { 7 | ingestion: Ingestion module { 8 | shape: hexagon 9 | } 10 | fetch: Data fetching module { 11 | shape: hexagon 12 | } 13 | schema: Schema version module { 14 | shape: hexagon 15 | } 16 | } 17 | next: NextJS 18 | db: Data 19 | 20 | templates -> engine.ingestion 21 | engine.fetch <-> db: Integrate user data 22 | engine.schema <-> db: Get version 23 | 24 | engine <-> tests 25 | } 26 | 27 | build: Final build { 28 | html: Rendered HTML 29 | } 30 | 31 | SSR.engine -> SSR.next -> build.html 32 | -------------------------------------------------------------------------------- /static/layout_gallery/sample4.d2: -------------------------------------------------------------------------------- 1 | payment 2 | 3 | AWS: { 4 | orchestrator: Orchestrator 5 | airflow: Apache Airflow { 6 | queue1: Queue 1 { 7 | shape: queue 8 | } 9 | queue2: Queue 2 { 10 | shape: queue 11 | } 12 | queue3: Queue 3 { 13 | shape: queue 14 | } 15 | queue4: Queue 4 { 16 | shape: queue 17 | } 18 | } 19 | 20 | orchestrator -> airflow.queue1 21 | orchestrator -> airflow.queue2 22 | orchestrator -> airflow.queue3 23 | orchestrator -> airflow.queue4 24 | } 25 | 26 | payment -> AWS.orchestrator 27 | 28 | backup: Data backup 29 | 30 | AWS.airflow.queue3 -> backup 31 | AWS.airflow.queue4 -> backup 32 | 33 | data: Data warehouse 34 | 35 | AWS.airflow.queue1 -> data 36 | AWS.airflow.queue2 -> data 37 | 38 | local: On-prem backups { 39 | queue1: Queue 1 { 40 | shape: queue 41 | } 42 | queue2: Queue 2 { 43 | shape: queue 44 | } 45 | } 46 | 47 | backup -> local.queue1 48 | backup -> local.queue2 49 | -------------------------------------------------------------------------------- /static/layout_gallery/sample5.d2: -------------------------------------------------------------------------------- 1 | tenant: Offsite Tenant { 2 | style.shadow: true 3 | 4 | accountant: Accountant 5 | security: Security 6 | janitor: Janitor 7 | } 8 | 9 | tenant.accountant -> Quickbooks 10 | 11 | auditors: Auditors 12 | 13 | auditors -> Quickbooks 14 | auditors -> IRS 15 | Quickbooks -> Clients 16 | 17 | dataroom: E335 Data Room { 18 | style.shadow: true 19 | style.fill: "#e9edef" 20 | style.stroke-width: 2 21 | 22 | whitelist: Whitelisted Server { 23 | shape: rectangle 24 | style.stroke-dash: 10 25 | style.stroke: "#000E3D" 26 | 27 | routing: Routing blocker 28 | headers: Add header tokens 29 | } 30 | 31 | platform: Microsoft Windows Fleet { 32 | style.stroke-dash: 4 33 | style.stroke: "#000E3D" 34 | build 35 | } 36 | whitelist <-> platform: Maintain connection {style.stroke-width: 4} 37 | } 38 | 39 | auditors -> dataroom.platform.build 40 | auditors -> dataroom.whitelist.routing 41 | tenant.accountants -> dataroom 42 | 43 | logging: Web based logger 44 | 45 | production: Data for prod { 46 | style.shadow: true 47 | 48 | network: Network availability { 49 | style.stroke-dash: 10 50 | style.stroke: "#000E3D" 51 | 52 | instances: App instances { 53 | style.multiple: true 54 | } 55 | 56 | db: App DBs { 57 | shape: cylinder 58 | } 59 | 60 | secrets: AWS Secrets 61 | 62 | containers: Docker containers 63 | 64 | instances -> db 65 | instances -> secrets 66 | containers -> db 67 | containers -> secrets 68 | } 69 | } 70 | 71 | dataroom.whitelist.routing -> production.network.instances 72 | dataroom.whitelist.headers -> production.network.instances 73 | production.network.instances -> backups 74 | -------------------------------------------------------------------------------- /static/layout_gallery/sample6.d2: -------------------------------------------------------------------------------- 1 | ibm: IBM "Espresso" CPU { 2 | core0: IBM PowerPC "Broadway" Core 0 3 | core1: IBM PowerPC "Broadway" Core 1 4 | core2: IBM PowerPC "Broadway" Core 2 5 | 6 | rom: 16 KB ROM 7 | 8 | core0 -- core2 9 | 10 | rom -> core2 11 | } 12 | 13 | amd: AMD "Latte" GPU { 14 | mem: Memory & I/O Bridge 15 | dram: DRAM Controller 16 | edram: 32 MB EDRAM "MEM1" 17 | rom: 512 B SEEPROM 18 | 19 | sata: SATA IF 20 | exi: EXI (Efficient XML Interchange) 21 | 22 | gx: GX { 23 | 3 MB 1T-SRAM 24 | } 25 | 26 | radeon: AMD Radeon R7xx "GX2" 27 | 28 | mem -- gx 29 | mem -- radeon 30 | 31 | rom -- mem 32 | 33 | mem -- sata 34 | mem -- exi 35 | 36 | dram -- sata 37 | dram -- exi 38 | } 39 | 40 | ddr3: 2 GB DDR3 RAM "MEM2" 41 | 42 | amd.mem -- ddr3 43 | amd.dram -- ddr3 44 | amd.edram -- ddr3 45 | 46 | ibm.core1 -- amd.mem 47 | 48 | amd.exi -- RTC 49 | --------------------------------------------------------------------------------