@diagrammo/dgmo-standalone 0.64.0 → 0.65.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Diagrammo LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,105 @@
+# @diagrammo/dgmo-standalone
+
+**Diagrams in a plain web page. One `<script>` tag, no build step.**
+
+Write a diagram as text, get an SVG. No npm install, no bundler, no framework —
+paste a script tag into a page you already have.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@diagrammo/dgmo-standalone/dist/element.js"></script>
+
+<dgmo-diagram palette="slate">pie Crew Rations
+
+Salt Pork: 34
+Hardtack: 28
+Rum: 17
+Limes: 21</dgmo-diagram>
+```
+
+That is the whole install.
+
+## Two ways in
+
+**`element.js`** gives you a `<dgmo-diagram>` element to write in your own
+markup — use it when you control the HTML.
+
+**`auto.js`** scans the page for `<pre class="dgmo">` blocks and draws them —
+use it when you *don't* control the HTML, which is the usual case with markdown,
+a CMS, or a static-site generator emitting ```` ```dgmo ```` fences.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@diagrammo/dgmo-standalone/dist/auto.js"></script>
+
+<pre class="dgmo">bar Ship Stores
+
+Salt Pork 34
+Hardtack 28
+Rum 17</pre>
+```
+
+Load one or the other, not both — each carries a complete copy of the renderer.
+
+Optional styling for the auto-scanner lives at `dist/auto.css`; the element
+brings its own.
+
+## Pinning a version
+
+The examples above float to the latest release, which is fine for a demo and a
+poor idea for a page you will not revisit. Pin it:
+
+```html
+<!-- replace VERSION with the number shown at the top of this npm page -->
+<script src="https://cdn.jsdelivr.net/npm/@diagrammo/dgmo-standalone@VERSION/dist/element.js"></script>
+```
+
+unpkg works the same way — swap the host for `unpkg.com/`.
+
+## What you get
+
+40+ chart types from one text format: flowcharts, sequence diagrams,
+timelines, org charts, gantt, maps, and the usual bar/line/pie family. The
+renderer infers the chart type from what you wrote, so there is one syntax to
+learn rather than one per chart.
+
+Themes and palettes are attributes — `palette="slate"`, `theme="dark"`. Maps
+fetch their basemaps on demand from `@diagrammo/dgmo` on the same CDN, so a page
+with no map downloads no map data.
+
+## Watching a diagram somebody showed you
+
+If someone published a diagram at Diagrammo — *showed it on the web* — you can
+watch it from any page, and every reader gets the version its author has now:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@diagrammo/dgmo-standalone/dist/element.js"></script>
+
+<dgmo-diagram watch="https://online.diagrammo.app/d/dgm_7f2a91"></dgmo-diagram>
+```
+
+Paste the share link you were sent, or just the id at the end of it. The
+diagram is fetched when the page loads — there is no polling, so a page left
+open shows what it fetched on arrival until it is reloaded.
+
+If your page sends a `Content-Security-Policy` header, it needs
+`connect-src https://api.diagrammo.app` or the browser will block the request.
+That case is not silent: the element draws a card naming the diagram and says
+what went wrong, as it does when a diagram is missing or its author has stopped
+showing it.
+
+## When you want a different package
+
+This one exists for the no-build case. Reach for a sibling instead when:
+
+- **You are using npm and a bundler** → [`@diagrammo/dgmo`](https://www.npmjs.com/package/@diagrammo/dgmo), the library. It does not contain these two files, deliberately: they are a complete renderer twice over, and shipping them to every `npm install` meant 39% of the tarball for something no `import` could reach.
+- **You are rendering markdown at build time** → [`remark-dgmo`](https://www.npmjs.com/package/remark-dgmo) and its wrappers for Astro, Docusaurus, Fumadocs, Nextra and VitePress. They draw the SVG during the build, so the reader downloads a picture and no renderer at all.
+- **You want it on the command line** → [`@diagrammo/dgmo-cli`](https://www.npmjs.com/package/@diagrammo/dgmo-cli), or `brew install dgmo`.
+
+## Links
+
+- **Language reference and gallery** — <https://diagrammo.app>
+- **Try it in the browser** — <https://online.diagrammo.app>
+- **Issues** — <https://github.com/diagrammo/dgmo/issues>
+
+MIT licensed — the full text is in `LICENSE`, in this package. Labels are drawn
+in [Inter](https://rsms.me/inter/) when your page already provides it, falling
+back to the system interface font; no font files are bundled.

package/dist/auto.css

@@ -26,6 +26,17 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
   font-family: ui-monospace, monospace;
 }
 
+/* A watched diagram that could not be drawn: the reference card, then this
+   sentence. Deliberately not styled as an error — a publisher who stopped
+   showing a diagram did something on purpose, and a red box would tell the
+   reader the page is broken. */
+.dgmo--live-state .dgmo-live-note {
+  margin: 0.5em 0 0;
+  font-size: 13px;
+  line-height: 1.5;
+  opacity: 0.8;
+}
+
 /* @diagrammo/dgmo block — standard embed chrome.
  * Override the [data-theme="dark"] selectors if your site uses .dark or
  * another color-mode convention. */