Show HN: Design architecture using code and visually simulate it in browser

Hey HN,

I have been working on this for a few months and recently open sourced my work. It’s a code playground where you can write TypeScript based code and the bundled runtime will execute it visually.

Here are some examples that you can try right away: Hello world https://app.metz.sh/template/2

Average stock price(Event based system) https://app.metz.sh/template/7

A polling setup(Shows parallel flows) https://app.metz.sh/template/4

There are more on the readme https://github.com/metz-sh/simulacrum#examples

I have been building software for ~8 years now but till this day I feel limited on how I can express my design. Boxes and lines just don’t do the job when complexity passes a threshold. I thought I would have luck with mermaid, but it’s just a codified way of creating boxes.

But with metz, I want to build a figma like experience. Like how designers use the tools that make most sense, create a design which democratises their idea and invites a health discourse. I as an engineer want to simply write the code for my design & get a figma like prototype which I can share with my Architect and PM and get it reviewed asynchronously.

I believe code is the best thing to do this as it’s such a reliable and easy way to express complexity. Unlike other code-to-diagrams tool, metz code doesn’t talk about where to place a box. You simply code to solve a design problem.

I have been scared to submit this for a while because I couldn’t find a single tool which leaned in this direction & I thought I was building something wrong. But I would love to know your thoughts and receive critique!