A shell script that converts visual file trees to HTML. Not very sophisticated.

You can choose to create a simple tree or a more colorful one using solidiquis/erdtree.

Same Interface for tree2svg.sh and erd2svg.sh. Slightly different behaviour and output due to the different tree generators.

tree	erd
/tree2svg.sh . > examples/tree2svg.svg	ADDITIONAL_ARGS='--no-git' ./erd2svg.sh > examples/erd2svg.svg

Note that the way the scripts handle the mapping of DevIcons used by erdtree is a bit crappy:
It converts some common icons to SVG using twemoji and fontawesome (see Mapping DevIcons).
Any ideas how to handle this more generically are welcome.

# Create a tree of the current folder and writes it stdout
./erd2svg.sh
# Create a tree of /some/dir and writes it to a file
./erd2svg.sh /some/dir > /some/other.svg
./erd2svg.sh /some/dir
# Additional params can be set via env
# If you want to edit the tree before it's converted
INTERACTIVE=true ./erd2svg.sh
# Use white line colors (e.g. for dark mode)
LINE_COLOR=white ./erd2svg.sh
# Pass additional args to tree provider
ADDITIONAL_ARGS='--no-git' ./erd2svg.sh
# Change root icon (to git for example)
ROOT_ICON='<i class="fab fa-git-alt fa-lg">'
# Multiple params
INTERACTIVE=true ADDITIONAL_ARGS='--no-git --dirs-only' ./erd2svg.sh

• Tree provider for creating the tree "text"
  • tree (for tree2svg.sh, tested with tree v2.1.0) or
  • erdtree (for erd2svg.sh, tested with version 3.1.2)
• aha (ANSI/HTML Adapter) for converting to HTML,
• docker and fathyb/html2svg image for converting to SVG,
• vipe, when using INTERACTIVE

For now the result is in an SVG with a canvas that's too large.
You can fix that manually by adopting width and height empirically: Too small will crop parts of the SVG.

If you need to convert to PDF, importing into draw.io and adopting the paper size (e.g. with "Custom") and the export PDF worked for me.

This is based on graphics I created for a talk on GitOps:

• Original "script" containing some more info on how to use the trees interactively in reveal.js
• Some more complex trees

Some hints for finding a matching FontAwesome or emoji to nerdfonts/devicons

• https://fontawesome.com/v5/icons/
• https://www.nerdfonts.com/cheat-sheet
• https://emojipedia.org/ or your local emoji-picker