A Decode demo (decode.dev)
1. Convert free form diagrams to mermaid diagrams
2. Use free form annotations to edit mermaid code

I'll be restyling Decode to look less like @tldraw.com's default UI, in order to build separate brand equity.

First up is picking a new font. I built this tool to quickly compare handwritten style fonts with Tldraw's.

I'm targeting full compatibility with github.com's and VS Code's markdown renderer. Here's a demo of a bunch of the markdown features it supports.

I added a markdown editor to Decode (getdecode.dev), including a side by side editor with real-time preview.

Convert free form diagrams to auto-layout versions, using Decode, getdecode.dev

Generating diagrams from code inside VS Code. This time with much improved auto-layout. Using Decode, getdecode.dev

Edit diagrams by drawing on them in Decode (getdecode.dev)

In Decode you can edit code by drawing on it. It's like grading your own homework, which you are. getdecode.dev

Demo of generating multiple files in Decode from a diagram and/or spatial instructions. getdecode.dev

Updated demo of Decode generating state-machines from diagrams, this time with streaming generation support

Then I do the reverse, generating a diagram from an implementation.

The diagram auto-layout is still rough. I'll work work on more robust auto-layout soon.

Tested the generated code by putting it into the XState visualizer.

Checkout the visualizer and the xstate package, if you haven't used it before: stately.ai/viz

Demo of Decode generating a state machine implementations from a drawing (getdecode.dev)

Next, I'm adding incrementally showing the generated code as it streams.