From 67fc9f8668099a413e00a628268d9ef989d663ea Mon Sep 17 00:00:00 2001 From: MinJae Kwon Date: Sun, 16 Aug 2026 16:12:36 +0900 Subject: [PATCH] feat(playground): target search terms for the online editor (#1246) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The playground had no page copy for search engines to match: the title said "Diagram as Code in your browser" and the app itself is a tool UI with almost no prose, so queries like "python diagrams online" had nothing to rank against. - Retitle to "Diagrams Playground — Online Python Diagram Editor" and rewrite the description around what people actually search for - Add WebApplication structured data (free, browser-based dev tool) - Add a docs page, Online Playground, with real content about the tool, linking to it and back to the installation guide - Use descriptive anchor text ("online playground") in the README and docs Co-authored-by: Claude Opus 5 --- README.md | 4 +-- docs/getting-started/installation.md | 2 +- docs/getting-started/playground.md | 43 ++++++++++++++++++++++++++++ playground/index.html | 32 +++++++++++++++++---- website/i18n/en.json | 3 ++ website/sidebars.json | 1 + 6 files changed, 76 insertions(+), 9 deletions(-) create mode 100644 docs/getting-started/playground.md diff --git a/README.md b/README.md index 8309314f..203bd8a5 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ Diagrams lets you draw the cloud system architecture **in Python code**. It was ## Getting Started -> Want to try it first? The [**Playground**](https://diagrams.mingrammer.com/playground/) runs **diagrams** right in your browser — no installation required. +> Want to try it first? The [**online playground**](https://diagrams.mingrammer.com/playground/) runs **diagrams** right in your browser — no installation required. It requires **Python 3.9** or higher, check your Python version first. @@ -66,7 +66,7 @@ You can start with [quick start](https://diagrams.mingrammer.com/docs/getting-st [**diagrams.mingrammer.com/playground**](https://diagrams.mingrammer.com/playground/) -Write **diagrams** code and see the rendered diagram instantly, without installing anything. It runs the real **diagrams** package in your browser via [Pyodide](https://pyodide.org), and supports node search, autocompletion, PNG/SVG/JPEG export, and shareable links. +A free online editor for **diagrams**: write Diagram as Code in Python and see the rendered architecture diagram instantly, without installing Python or Graphviz. It runs the real **diagrams** package in your browser via [Pyodide](https://pyodide.org), and supports node search, autocompletion, PNG/SVG/JPEG export, and shareable links. See the [playground guide](https://diagrams.mingrammer.com/docs/getting-started/playground) for details. ## Examples diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md index 3298ac1b..f108e33c 100644 --- a/docs/getting-started/installation.md +++ b/docs/getting-started/installation.md @@ -3,7 +3,7 @@ id: installation title: Installation --- -> Prefer to try it without installing? The [**Playground**](/playground/) runs **diagrams** in your browser. +> Prefer to try it without installing? The [**online playground**](/playground/) runs **diagrams** in your browser — see the [playground guide](/docs/getting-started/playground). **diagrams** requires **Python 3.7** or higher, check your Python version first. diff --git a/docs/getting-started/playground.md b/docs/getting-started/playground.md new file mode 100644 index 00000000..75784c66 --- /dev/null +++ b/docs/getting-started/playground.md @@ -0,0 +1,43 @@ +--- +id: playground +title: Online Playground +--- + +The **Diagrams Playground** is a free online editor for the **diagrams** library. Write Diagram as Code in Python and see the rendered architecture diagram appear next to it — in your web browser, with nothing to install. + +> **[Open the Playground →](/playground/)** + +## Why use it + +Installing **diagrams** locally means installing Python *and* [Graphviz](https://www.graphviz.org/). The playground skips both, which makes it handy when you want to: + +- try **diagrams** before installing anything, +- sketch a cloud architecture diagram from a laptop that isn't set up for Python, +- share a working diagram with a teammate as a single link, +- look up which node classes exist for AWS, Azure, GCP, Kubernetes and the other providers. + +## What it can do + +- **Live preview** — the diagram re-renders as you type. +- **Node browser** — search every available node, or browse the full provider → category tree, and click to insert the matching `import`. +- **Autocompletion** — import paths and node names complete as you type, with signature hints for `Diagram`, `Cluster` and `Edge`. +- **Export** — download the result as PNG, SVG or JPEG at a size you choose, or copy the image straight to your clipboard. +- **Share links** — the whole diagram is encoded into the URL, so sending the link is enough. Nothing is stored on a server. +- **Examples** — start from a ready-made diagram instead of a blank editor. + +## How it works + +The playground runs the real **diagrams** package — not a reimplementation — inside your browser using [Pyodide](https://pyodide.org), which is CPython compiled to WebAssembly. Graph layout is done by a WebAssembly build of Graphviz. + +Everything executes locally in the browser tab: your code is never uploaded, and there is no backend. The first visit downloads the Python runtime, so it takes a few seconds; after that it is cached. + +## When to install instead + +The playground is for quick work and sharing. Install the library ([installation guide](/docs/getting-started/installation)) when you want to: + +- keep diagrams in version control next to your code, +- generate diagrams in CI or a build script, +- use custom local icons, or +- work offline. + +The Python code is identical either way, so anything you write in the playground runs unchanged after `pip install diagrams`. diff --git a/playground/index.html b/playground/index.html index a8530da6..3f26a4dc 100644 --- a/playground/index.html +++ b/playground/index.html @@ -3,10 +3,10 @@ - Diagrams Playground — Diagram as Code in your browser + Diagrams Playground — Online Python Diagram Editor @@ -18,10 +18,10 @@ - + @@ -31,13 +31,33 @@ content="The Diagrams Playground: Python code on the left, a rendered cloud architecture diagram on the right." /> - + + + +