excalidraw

sublimated renders .excalidraw files as diagrams. push via git, view the rendered diagram on the web.

• diagrams are rendered server-side on push — no client-side JavaScript needed

• the rendered SVG is stored alongside the source, so viewing is instant

• edit mode shows the raw JSON (visual editor planned)

• fonts are embedded — all 21 excalidraw font families render correctly without external requests

• inline comments and reactions work on the rendered diagram (SVG is inline DOM)

demos

• simple — rectangles, arrows, text

• flowchart — a basic flowchart with decisions

• architecture — system architecture diagram

• wireframe — simple UI wireframe

• freehand — freedraw and ellipses

how it works

1. push a .excalidraw file via git (or save via edit mode)

2. sublimated detects the file type and sends it to the excalidraw renderer (pure SVG, no canvas/DOM)

3. the rendered SVG is stored in CAS as a render_svg representation

4. when you view the file, the SVG is displayed inline

5. if rendering fails (invalid JSON), the source is shown as highlighted code

file format

excalidraw files are JSON with this structure:

{
  "type": "excalidraw",
  "version": 2,
  "elements": [...],
  "appState": { "viewBackgroundColor": "#ffffff" }
}

each element has a type (rectangle, ellipse, diamond, arrow, line, freedraw, text, image, frame), position, size, style properties (strokeColor, backgroundColor, fillStyle, roughness, etc).