Recently, while preparing the README file for a project hosted on GitLab, I came across the possibility of using mermaid to generate diagrams from markdown-like text. This gave me the idea of trying to recreate the tree-like diagram obtained from the tree -L 2 command.
The tree-like format was not fully preserved (the root appears as the leftmost element, but not at the top, and the reading of the elements is not as vertical, for example), but the result, made as simple as I could, was interesting, as you can see here. Also, there are a few points to keep in mind:
- The diagram (a.k.a. flowchart) generated with mermaid takes up more space than the diagram generated with the
tree -L 2command. In addition, if the purpose of this diagram is merely to provide an overview of the directory structure of a given project, obtaining it with mermaid may require extra effort that has no clear benefit. - With the help of style features, you can use the color, for example, of subgraph boundaries (stroke) to encode whether a group of elements concerns a folder or not. This information is already encoded to some extent in the indentation or vertical positioning but may be useful, for example, to separate subgroups of files under the same helper text from other files at the same hierarchical level.
- The use of subgraphs for individual files, as in the case of the README file, is because they have a title. This way each file may also have a helper text.
- The default placement of titles, as well as the "boxes" of each subgraph, can help, in my opinion, the user to quickly associate a particular helper text with the corresponding elements.
- At the interaction level, it is possible to associate a hyperlink with each node (check the root and the README file, please). On the other hand, you can select text from this diagram and copy it easily.
Finally, if you want to know more about mermaid or GitLab Flavored Markdown, you can check out the links. I hope this quick sharing can be helpful to you!
Top comments (0)