Drawing Structures from Text
Visualizing different flows, relationships, and wireframes from text
People in Web3 are enamored with the ability to organize new types of communities, groups, and organizations. For a number of months, I explored visualizing different organizations: how their power and agency flow. Since there is not a central governing entity in these organizations, the relationships become quite complex and interwoven. So, I developed a small tool to help me work through this. I call it Wiremarks.
A wiremark is the compound of “wireframe” and “markdown”. Wireframes are visual representations of organized things: groups, applications, and governing bodies to name a few. Markdown is a popular notation style for generating HTML in websites and applications. In wiremarks, you can write out different relationships, like mother->daughter. The arrow (a hyphen directly followed by a right bracket character) signifies the direction of the relationship. Based on this notation, the library renders out joined entities as little cards. Above is a screenshot of how the Crown, the United Kingdom’s government, is organized and ultimately drawn via wiremark.
Once there are cards laid out, you can compose, drag, zoom, and organize aspects of the wireframe. You can also download it as an SVG file to use elsewhere. Embed it on your site or throw it into Figma for a presentation.
If you give it a try, I would love to hear any and all feedback! Wishing you a bountiful autumn,
—Jono