Free, flexible flowchart scripting in your editor with no drawing required
I was pleasantly surprised that my recent post about tracking to-dos in VS Code generated some interest, so here’s another killer free extension to help you manage your projects from within the editor.
If you’ve ever formally trained for software development, project management, or any discipline requiring design and planning, you may already be very familiar with flowcharts. Don’t worry if you haven’t. Here we’re just going to use a neat VS Code flowcharting extension to make diagrams that help us naturally think our way through various game design scenarios.
I have several examples to share, but you’ll probably think of loads of potential applications for this when you get going like I did.
Example: Planning screens and major features
I don’t chart out every little thing I do in development, games or otherwise, and you probably shouldn’t either. That said, I think it’s very helpful at the outset to sketch up everything you think a small project might contain and see if it’s really a small project or not.
I came up with a quick chart for what a game jam project might look like if development went according to plan. I used sharp rectangles for different scenes and rounded rects for major features.
# Jam Entry Fall '23 ```mermaid graph TD Splash-->Title subgraph Options Main--> a("Audio") & v("Video") & g("Gameplay") end Title<-->Options subgraph Gameplay PlayScene<-->GameOver-->l(Leaderboard) end Title<-->Gameplay Title<-->Credits ```-->-->-->-->
After creating a header and telling VS Code I’m writing a Mermaid diagram, I defined a top-down graph using “graph TD.”
Nodes can be defined with one word if you don’t need spaces, and they can be created while defining a connection like in the line “Splash–>Title.” You can define a node with a different ID than the caption if you want to use spaces in the name, and the how you enclose the caption determines the node’s shape: ( ) for a rounded rectangle, [ ] for a regular rectangle, (( )) for a circle, etc.
The arrows and subgraph are probably easy to figure out. Here’s how the chart renders in Preview Mode:
Example: Playing with map layouts
Flowcharts can hold more than feature plans. Using less than ten lines of markup I was able to sketch out a reasonably complex level map plan.
It’s worth pointing out here that you can’t fully control the direction specific connections flow on the chart, meaning this likely wouldn’t be your final level map, but when you can sketch the basics this quickly, it’s probably a useful trick to have in your back pocket.
# First Floor Map ```mermaid graph BT Spawn-->EntryWay EntryWay-->StairsDown & MainHall & StairsUp StairsDown-->LongCorridor-->JailCell & ServantQuarters & GoldRoom MainHall-->ThroneRoom & Kitchen StairsUp-->KingsChambers & GuardTower ```
If you’re okay with simple rectangles and one-word labels, you can create a diagram almost as quickly as you can think of all the nodes.
Here’s how it renders:
Example: Planning branching dialog
When I see people talking about game design around the web, I see a lot of discussion about branching dialog systems. This is for good reason. Dialog in games gets complicated fast when the player has multiple response options and those options have different consequences.
Once again, I found this Mermaid extension suitable for great planning. This script got a little more complex, but it illustrates how powerful the node styling system is. Similar to CSS, I can define custom style classes and apply them to as many nodes as I want, meaning I was easily able to ensure you can easily distinguish between characters when going through the diagram.
# City Guard at Gate ```mermaid graph TD subgraph Legend direction LR Guard Player end guardHalt["Who goes there?"]-->playerFriend["A friend. Well met."] playerFriend-->guardClosed["The city gate is closed by order of the king."] guardHalt-->playerEnemy["Your worst nightmare! (attack)"] playerEnemy-->fight((Result: Battle)) guardClosed-->playerWrong["Wrong answer, metal pantser! (attack)"]-->fight guardClosed-->playerKing["I uh...I am...the king...?"] playerKing-->guardHail["MAKE WAY FOR HIS MAJESTY, THE KING!"]-->gate(("Result: The gate is opened")) class Guard,guardHalt,guardClosed,guardHail NPC class Player,playerFriend,playerEnemy,playerWrong,playerKing Player classDef NPC fill:#025b7a; classDef Player fill:#7a0202; ```
Again, you can do a much simpler version of this, but it was an interesting look at what’s possible.
Here’s what you end up with:
After playing with this extension for an afternoon, I think this may be very helpful in thinking through designs of all sizes. It also seems like an excellent way to communicate flows and bring others up to speed on what I’m doing if the need arises. For totally free, you can’t beat the price.
If you have another great extension for managing work inside VS Code, I’d love to hear about it.
Todd Mitchell is a US Midwest-based comedy writer and game developer with bylines at Weekly Humorist, Fanbyte, Slackjaw, End of the Bench Sports, and more. He’s the author of Inside Video Game Creation, the founder of CodeWritePlay, and host of the GameDev Breakdown podcast. Follow him on Twitter @Mechatodzilla.