Trying to make sense of other people's code can be difficult and time-consuming. And as a writer finding the best way to explain your code or algorithms can also be challenging when creating technical/software engineering documentation. To solve this problem I built CodeFlow, a Confluence macro for generating SVG flowcharts from JavaScript code. The aim of this macro is to make it easier for readers to understand code and algorithms in technical documentation by displaying the code as a flowchart.

What it does

CodeFlow allows users to insert javascript code and generate flowcharts that describe the code. It also allows you to demonstrate your code logic from different abstractions levels.

Use Cases:

  • explain/document your code by flowcharts in Confluence
  • learn other's code by visual understanding
  • create flowcharts for any process simply described by valid JS syntax right inside in Confluence

How I built it

I built CodeFlow with Forge by Atlassian and used a node module called js2Flowchart. Forge allowed me to create a macro for Confluence with a few commands and deploy it in no time. The generated diagram is an SVG image that is attached to a Forge UI Image component.

Accomplishments that I'm proud of

Creating a tool that can be useful for technical writers to better explain algorithms/code and for readers to better understand algorithms/code.

What I learned

I learned how to create macros with Forge

What's next for CodeFlow

Next, I plan to add support for more programming languages and more configuration options.

Share this project: