MINDMAP
Use the Mindmap extension to visualize pieces of your Roam graph as a mindmap. The name of the script is mindmap
.
Installation
You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".
Manual Installation
If instead you prefer to manually install, first create a block with the text {{[[roam/js]]}}
on any page in your Roam DB. Then, copy and paste this code block as a child of the block.
var existing = document.getElementById("mindmap");
if (!existing) {
var extension = document.createElement("script");
extension.src = "https://roamjs.com/mindmap.js";
extension.id = "mindmap";
extension.async = true;
extension.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(extension);
}
Usage
On any given page, there will be a new "Open Markmap" option from the ...
menu on the top right. The option will open a panel on the bottom of the page rendering your page data as a map diagram.
The panel will have three additional buttons on it. The rightmost button could be used to enter and exit full screen. The middle button could be used to refresh the mindmap after editing the page data that you're on. The leftmost button could be used to export the mindmap as a png.
Shift clicking any node will bring you to that block's page!
For more information on markmap, the tool used to create a mindmap of your Roam data, visit their docs!
Configuration
To hide the tag characters like #[[]]
or [[]]
from text in the mindmap, add a block that says Hide Tags
to the roam/js/mindmap
page.
Demo
Contributors
A special thanks to those who's contributions helped make this extension possible:
- Rushi Bhavsar 💵📓🤔
- Tomáš Baránek 💵
- Chris Kunicki 📓🤔