Skip to main content

On Sale: GamesAssetsToolsTabletopComics
Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

howd you make this? the flowchart format is awesome and id love to use it for my own reference if it's open sourced!

(+1)

Feel free to look at the source code for reference!

This actually isn't made using any specific tool or such, aside from VS Code, and ShareX to make the screenshots more easily. (You can predefine a screen rectangle size to capture in it. I think I scaled these down to half in the flowchart, though, which makes them less blurry on phones.)

It's really just a web page with a bit of CSS and a few spacers to make the automatic layout work, which tends to come out more reasonable than SVG.

The connectors are all manual using relative grid coordinates though, which isn't all that convenient in the long run… Maybe I'll use a little bit of JavaScript to draw them in automatically when I update this 😅

This was a challenge to myself to see if I could make this using HTML and CSS only, without using any JavaScript at all. It turned out well, but I think the game is reaching a size where that approach isn't entirely reasonable anymore.