{"id":20145123,"url":"https://github.com/terrastruct/d2-playground","last_synced_at":"2025-04-06T13:09:59.552Z","repository":{"id":65051764,"uuid":"572753527","full_name":"terrastruct/d2-playground","owner":"terrastruct","description":"An online runner to play, learn, and create with D2, the modern diagram scripting language that turns text to diagrams.","archived":false,"fork":false,"pushed_at":"2025-03-18T11:59:34.000Z","size":63006,"stargazers_count":90,"open_issues_count":21,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T12:08:42.761Z","etag":null,"topics":["diagramming","diagrams","text-to-diagrams"],"latest_commit_sha":null,"homepage":"https://play.d2lang.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/terrastruct.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-01T00:34:50.000Z","updated_at":"2025-03-18T11:59:37.000Z","dependencies_parsed_at":"2024-04-11T06:22:11.509Z","dependency_job_id":"4d9cae85-b8c9-4ee4-af18-0a56d7b382c2","html_url":"https://github.com/terrastruct/d2-playground","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terrastruct%2Fd2-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terrastruct%2Fd2-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terrastruct%2Fd2-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terrastruct%2Fd2-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/terrastruct","download_url":"https://codeload.github.com/terrastruct/d2-playground/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247485287,"owners_count":20946398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["diagramming","diagrams","text-to-diagrams"],"created_at":"2024-11-13T22:14:23.597Z","updated_at":"2025-04-06T13:09:59.530Z","avatar_url":"https://github.com/terrastruct.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./src/assets/images/og.png\" alt=\"D2 Playground\" /\u003e\n  \u003ch2\u003e\n    An online runner to play, learn, and create with D2, the modern diagram scripting language that turns text to diagrams.\n  \u003c/h2\u003e\n\n[![ci](https://github.com/terrastruct/d2-playground/actions/workflows/ci.yml/badge.svg)](https://github.com/terrastruct/d2-playground/actions/workflows/ci.yml)\n[![daily](https://github.com/terrastruct/d2-playground/actions/workflows/daily.yml/badge.svg)](https://github.com/terrastruct/d2-playground/actions/workflows/daily.yml)\n[![discord](https://img.shields.io/discord/1039184639652265985?label=discord)](https://discord.gg/NF6X8K4eDq)\n[![twitter](https://img.shields.io/twitter/follow/terrastruct?style=social)](https://twitter.com/terrastruct)\n[![license](https://img.shields.io/github/license/terrastruct/d2-playground?color=9cf)](./LICENSE.txt)\n\n\u003c/div\u003e\n\n**Notice:** This is not the repository for the D2 language. That can be found [here](https://github.com/terrastruct/d2).\n\n# Table of Contents\n\n\u003c!-- toc --\u003e\n- [FAQ](#faq)\n  - [What is this written in?](#what-is-this-written-in)\n  - [How does it work?](#how-does-it-work)\n  - [What's this API?](#whats-this-api)\n- [Contributing](#contributing)\n- [Dependencies](#dependencies)\n\n## FAQ\n\n### What is this written in?\n\nVanilla HTML, CSS, and Javascript.\n\n### How does it work?\n\n![Sequence diagram](./docs/assets/sequence.svg)\n\n### What's this API?\n\nWe are working on a full WASM build of D2 that includes the layout engines, but it\nrequires optimizations to get the build size down to be manageable for the web. Tracking\nhere:\n[https://github.com/terrastruct/d2/pull/436/files](https://github.com/terrastruct/d2/pull/436/files).\n\nWhen this is ready, Playground will offer two options: a fully offline, local version\npowered by D2 WASM running on your browser, and an API version, for running on low-power\nmachines. Currently, the API just takes an encoded D2 script and runs the layout engine.\nIt saves no data and does nothign else.\n\n## Contributing\n\nContributions are welcome!\n\n1. Install `esbuild`:\n   [https://esbuild.github.io/getting-started/#install-esbuild](https://esbuild.github.io/getting-started/#install-esbuild)\n1. Run `git submodule update --init --recursive` to pull the submodules (D2's VSCode plugin\n   for syntax highlighting, and our CI library).\n1. Go to `src/js` and run `yarn` to get the Node modules.\n1. Run `go run main.go` and open `http://localhost:9090`.\n\n## Dependencies\n\nExternal dependencies are kept to a minimum. Currently they are:\n1. [Monaco Editor](https://github.com/microsoft/monaco-editor) for text editing features.\n1. [Panzoom](https://github.com/anvaka/panzoom) for SVG navigation.\n\nBoth are not ideal. Monaco is unnecessarily heavy and Panzoom lacks scrolling. The plan is\nto replace these one day.\n\nIf you're a contributor, please do not add any dependencies without discussing first.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterrastruct%2Fd2-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fterrastruct%2Fd2-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterrastruct%2Fd2-playground/lists"}