Changelog
Follow up on the latest improvements and updates.
RSS
Last week was jam packed from demos and one thing was clear, we need to make our playground as close to real world system as we can and one major thing holding us back was the support for parallel execution.
Well, no more! You can now represent background async tasks in metz. Follow the instructions here.

With this release you now have the ability to have best of both the worlds and not lose out on already established knowledge while still having the interactive benefits of metz.
Simply copy the embed link and paste it in notions or confluence and voila! You get interactive docs.

This week was jam packed with covering the last 1% of work.
Added features
- A sync manager which will continuously back up you work, and prevent from concurrent overwrite
- Added support to show changed positions of nodes in preview as well rather than just the playground
Bugs & QoL Fixes
- Added close button to popups
- Fixed a bug where node and edges blended through each other
Notable learnings
- We use neon.tech for our db needs and uses a postgres14+ feature called SNI. Most of analytics dashboard solutions, metabase, redash, popsql etc don't have compatible client libraries and hence don't allow creating dashboards with neon.
- We also use SWR to keep things fresh in app and so far we had excellent experience with some minor tweaking. Had to create our own abstraction on top of it, but our internal devex improved & app felt faster!

Before this update, there were only two levels of hierarchy that we managed. A class would be a big node and inside it we'd have smaller nodes for all the methods of the class. But that's not how real life diagrams are represented.
Introducing, folder structure based hierarchies. There are two reasons why we chose this approach:
- Keep code vanilla, don't add anything custom.
- Using a folder structure to create boxes around boxes forces you to define better boundaries.
Explanation
Using code to create diagrams and by extension a design of the system, is amazing for a few reasons but we believe the best one is 'Foresight'. You can see and visualise what the structure of the code would be from the get go.
And hence that should be reflected when you are trying to create boundaries(or hierarchies).
Because what's a folder, if not a repository masquerading?

With this update, you can right click on a folder or a file to open a menu.
You can also drag and drop to move files and folders!

You can now add icons to your node. Simple open the node console and search for whatever tech icons you are interested in.
With this feature, your nodes can have the visual identity that will give depth and context to the diagram.
new
fixed
Save node positions

If you were to move a node, the app would simply forget about it when you opened the Playground again.
This is now fixed and we can now store and apply you node position changes
new
Edge Labels

Every diagramming tool has this, and for good reason.
Simply hover over an edge to write the details about that edge.
new
improved
fixed
App architecture overhaul

This update is pretty boring, but only on the outside!
We re-worked our internal app architecture to make it more performant, and easier for us build new features.
This overhaul involved:
- Moving to CQRS pattern
- Carving out zustand stores and composing them whenever needed
- Using RxJS to expose internal changes to host
- And much more...
All in all, our app is better, faster and smoother now!
new
improved
fixed
Compiler Overhaul

After using our tool internally, along with feedback from early users, we realised that our compiler was too brittle.
It worked only under certain conditions but if you were to sway from those and dare write real life code, it just gave up.
We are happy to announce that we have completed a grounds-up rework of our compiler.
This change involved re-thinking the architecture such that it works in any scenario and with any code.
Load More
→