I just released an update to Deciduous that makes working with decision trees a little bit easier. So, what’s new?
First, it now sports a dark theme, making late night resilience easier on the eyes. And also because my co-conspirator Kelly Shortridge needed a dark mode decision tree to match the dark slide backgrounds at Black Hat 2023 last August.
Next, it’s now available as a CLI that can convert trees to PNGs and SVGs. With a recent version of Node.js installed, simply run npm install -g deciduous to install the deciduous package, and then run deciduous input.yaml output.png to render a Deciduous tree defined in input.yaml to output.png. This can be used in build systems, IDEs, and automation scripts to produce high quality decision tree images.
We also added a few other small quality of life features like:
- You can close and open the edit pane when your screen size is limited (like with iPads)
- You can now indent or comment out multiple lines at a time
- PNG exports are now 2x resolution for clarity
- The dropdown menus now close if you click outside of them
- The ability to display a legend
- A folder with example trees as inspiration
But of more interest to me, Deciduous can now reimport images you previously exported as PNGs or SVGs. Importing an image produces the original editable decision tree for editing, as if it weren’t baked into pixels or vector form. This makes it easy to share decision trees with colleagues and collaborate to better understand the resilience of your systems against different types of failure.
For example, if a colleague shares a decision tree in Slack, you can download the image, import it into deciduous.app, and discover the YAML used to generate it. While most teams likely use git workflows to manage their trees, we also know engineers gotta go fast, so it makes sense to enable speedier sharing and editing.
How does this new version of Deciduous reimport data from images? It starts in its image exporting process where it uses steganography to embed data inside the exported image. Deciduous sneaks the full source code of the exported decision tree into the exported image as hidden data that image viewers ignore.
For PNGs, Deciduous appends base64-encoded text containing the source document to the end of the file. PNG decoders will discard trailing bytes and thus ignore the hidden data. For SVGs, Deciduous generates an XML comment containing the source document and again appends it to the end of the file. SVG decoders’ XML parsers will parse the trailing text into a comment, which will be ignored by the SVG renderer.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
…
<path fill="none" stroke="#2b303a" d="M101.53,-73.66C101.53,-67.84 101.53,-61.41 101.53,-55.16"/>
<polygon fill="#2b303a" stroke="#2b303a" points="105.03,-54.93 101.53,-44.93 98.03,-54.93 105.03,-54.93"/>
</g>
</g>
</svg>
<!-- deciduous:dGl0bGU6IFJpY2sgQXN0bGV5CgpmYWN0czoKLSBnaXZlX3VwOiAiTmV2ZXIgR29ubmEgR2l2ZSBZb3UgVXBcbiIKICBmcm9tOgogIC0gcmVhbGl0eQoKZ29hbHM6Ci0gbGV0X2Rvd246ICJOZXZlciBHb25uYSBMZXQgWW91IERvd25cbiIKICBmcm9tOgogIC0gZ2l2ZV91cA== -->
When asked to import a file, Deciduous checks to see if the file has embedded hidden data in either of these two formats and, if so, extracts the data and imports it.
All of this works with the new CLI tool as well. Ask it to convert an image back into a .yaml with deciduous input.png output.yaml and you have your original decision tree declaration.
This technique was inspired by Macromedia Fireworks, a charming yet defunct graphics editor similar to Photoshop, which uses PNG as its native file format. A “Fireworks PNG” has enhanced features like editable layers and effects when loaded in Fireworks, but displays as a normal image in web browsers or image viewers. Fireworks uses this same trick of embedding its application-specific data format inside of a standard image format where image viewers will ignore it.
While I mostly interact with software engineers, working on Deciduous has exposed me to more security-minded people who I’ve learned associate steganography with malware. Well, this feature could allow you to mount “attacks” like the user importing the “malicious” decision tree and receiving the incorrect YAML for it. Truly cybergeddon stuff.
We love making these little quality of life improvements to Deciduous when we can, and are always open to feedback on how else we can make Deciduous more useful to you. Have fun with this new feature and keep sharing the trees you generate with us (and the world).