Super Fast Game Development Flowcharts in VS Code

by

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.

The extension you’ll need is Markdown Preview Mermaid Support by Matt Bierner. While you don’t have to fully understand what’s happening to use it, the short story is that Mermaid is a Javascript-based diagram rendering tool often used to draw up flowcharts from connections defined in Markdown files. All you need to do is install the extension, start a .md file in your project or another location of your choosing, define nodes and connections using Mermaid’s flowchart syntax (the extension also requires some formatting illustrated at the extension link above), and open Preview Mode to see the chart.

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.

Leave a Comment