How to create diagram of your project's folder structure in 3 simple steps | convert your folder structure to diagram

Converting your project's folder structure to a diagram can be useful in case of presentation, teaching best practices for the folder structure or it can be a requirement for you to explain your code's structure.

to convert folder structure to the diagram or a flowchart can be done by using many ways such creating manually a graph by following your project's code structure or you can use ChatGPT to solve this problem. But wait! ChatGPT can not create a graph for free right?

So what's the solution?. well that's right free versions of ChatGPT is not able to create a flow chart.

But we can achieve this by following these steps.

• Write a raw folder structure text to your readme or save it anywhere.
• Create a prompt for ChatGPT to convert this structure to mermaid code.
• Convert mermaid graph to easily readable & editable flow chart.

Write raw folder structure

There are many ways to convert your folder structure to text but for now let's keep things simple. I have already created a post in which I clearly mentioned that How you can complete this part so check this out:

📓 how to convert your project's structure to text

Convert to mermaid

After converting your project's folder structure to text you have to convert it to mermaid code So that how you can easily convert it to mermaid graph right.

step 1: Write a prompt

Get your text form of project's structure and tell ChatGPT to convert it to mermaid like this

The code that ChatGPT provided is that

graph TD;
    A[tailwindPostCss]
    A1[assets]
    A1-1[img]
    A2[blog]

    A --> A1
    A1 --> A1-1
    A --> A2

step 2: Convert mermaid code to diagram

Go to mermaid.live and simply paste the mermaid code there.

mermaid code will generate flow chart like this

Although this diagram is not editable by mouse And it is very difficult to add comments and description about your folder structure through mermaid graphs.

But you do not need to worry about it. it's time for the next step.

Convert mermaid to easily editable Flow chart diagram

Now you have mermaid code for the flow chart of your folder structure.

So what you need to do is to go to https://excalidraw.com/

Now click on

• more tools
  • mermaid to excalidraw (under generate)

now just paste your project structure's mermaid code. on the left input

just like this

After pasting mermaid code your flow chart will be generated to the left.

just click on insert button then it will be available for you on editor.

By creating diagram or flow chart of your project's folder structure to the excalidraw you are allowed to edit it freely and you can also export it as png as well.