Home APT Tracker Github
Kali Linux Guide How to host a Website Wireshark CTF How to build Flowcharts with Mermaid How to setup RSS feeds

How To: Flowcharts

There are many reasons to create flowcharts as a cybersecurity professional. The chief reason is to showcase the path of a vulnerability. In this guide we talk about and show how to quickly create a flowchart with icons to add a more professional presentation.

Requirements

To start there are a few things you need to know. Flowcharts have their own code known as Mermaid. Luckily you don’t need to be an expert in mermaid code to create these flowcharts. To bridge the gap in knowledge of code and performance we will be using a few different free software’s to help us. First and foremost is ChatGPT as the AI will write your code, so you don’t have to learn it. We’ll get into the prompts to enter soon. For now, let’s look at possible options of where to put your code.

  1. Visual Source Code (VSC)
    • VSC has an extension that allows for the preview of mermaid code. The best part of using VSC is that you can also incorporate things like font-awesome icons (more on that later). All you need to do is head over to VSC and download the applicable version. Once you have it, head over to the extensions portion and download Markdown Preview Mermaid Support to be able to preview your chart in real time.
    2. VSC
  2. Mermaid Live Editor
    • Mermaid Live Editor is a free site hosted on GitHub to use enter your code directly and view the output in real time. This site makes it very convenient to use and edit your code as you do not have to download any software or extensions. But the catch is you will not be able to use font-awesome icons or other HTML language icons. Good news is if you word it right, ChatGPT will make sure you still have icons. Also, there are sample diagrams that allow you to simply edit the text within it to tailor it to your needs.
    3. VSC
  3. Flowchart.io
    • This is another online site that is free to use. It can be very persistent in getting you to sync an account to it, however this can be avoided if you have a few minutes to go through the prompts. Flowchart.io, formerly known as draw.io, is a bit unique compared to the others in that you don’t need to know mermaid code at all. You get to put what you want where you want it. It offers a wide range of features to create flowcharts, diagrams and other visual representations. The downside to this is that it is very time-consuming. Everything from size to spacing needs to be adjusted when using this. But if you have the time it can make for a very nice flowchart. There is also the option to input mermaid code written by yourself or ChatGPT however, it is very buggy when coming from Chat.
    4. VSC

Example Workflow

Find a CVE
For this example, we will use CVE-2024-21413 a Microsoft Outlook RCE.

VSC

Next, do research and confirm what the vulnerability is. Once you do that head over to ChatGPT and craft a definition based on your findings. “Create me a flowchart of CVE-2024-21413. It is a Microsoft outlook vulnerability that allows for RCE.” If you agree with the steps it gave back to you, have it put that flowchart into mermaid code and specify which tool you are using so it is compatible with it.

Once you have the code it gives you select the “Copy code” in the top right corner.

VSC

Paste that code into VSC in a file named the CVE.md (ex. CVE-2024-21413.md). Once the code is in, use the publish icon to view the flowchart.

VSC

Use ChatGPT to edit the code to get your desired look. As you work with it more you will understand how to do more with it like in the image below.

VSC

Conclusion

Creating flowcharts is an essential skill for cybersecurity professionals to illustrate vulnerability pathways clearly and effectively. This guide has demonstrated how to use various free tools to quickly create professional flowcharts with icons, enhancing visual appeal and clarity. By leveraging AI like ChatGPT to generate Mermaid code, you can simplify the process and focus on content rather than syntax. Tools like Visual Studio Code (VSC), Mermaid Live Editor, and Flowchart.io each offer unique advantages, from real-time previews and icon integration to drag-and-drop interfaces, catering to different needs and levels of detail. By understanding and utilizing these tools, you can communicate complex cybersecurity concepts more effectively, making your analysis and presentations more impactful.