spinagram

Live UI

A local preview that re-renders on save.

spinagram serve opens a local, read-only web UI with live reload. It needs the ui extra (pip install 'spinagram[ui]'); the web bundle ships in the wheel, no Node needed.

spinagram serve specs/ --theme ../my-theme          # http://127.0.0.1:8765, opens the browser
spinagram serve specs/ --layout elk --port 0 --no-open

The navbar switches between Diagrams, Themes and Icon packs; Docs opens this site. The left sidebar lists the 10 diagrams you opened last (kept in your browser).

  • Diagrams page: every diagram as a card with a live thumbnail, grouped by category (AWS, Google Cloud, Kubernetes… inferred from icons when not declared). Type to search ids, titles, subtitles, categories and tags (every word must match); click tag chips to require tags. Specs that fail to load are listed with their error.
  • Diagram view: every spec under the paths. Saving a spec, its _defaults.yaml, a .py helper or any file of the theme (including the themes it extends) re-renders in place, keeping zoom and pan. Errors show over the last good render. Wheel zooms, drag pans, f fits, 0 is 100 %; the header switches the layout engine for diagrams with layout:. Overflow, icon warnings and not-downloaded icon packs are flagged.
  • Styles: Inspect (or i) opens the CSS inspector: click an element to see its classes, computed style and the rules behind it. Saving any stylesheet a diagram uses, wherever it lives, re-renders that diagram. See CSS by backend.
  • Themes page: a card per theme (built-in, then your custom theme) showing a sample diagram rendered in that theme, with a search box. Open a card for the full token sheet.
  • Icon packs page: a card per pack (downloaded first) with twelve sample icons, with a search box. Open a card for the full grid and Fetch.
  • Themes: token sheet of the built-in and active theme: colours (with the token they point to), font roles rendered in the embedded fonts, node and zone styles with previews, defaults and chrome.
  • Icon packs: registry state, a searchable grid per downloaded pack and Fetch for missing ones. serve never downloads during a render (a missing pack is flagged with a link to fetch it).

The server binds 127.0.0.1 only and rejects other Host headers.