Mind map (tree chart) implementation (!)

Really glad guys like you are about, Paul. I’ve slept out and watched TV for the start of the New Year and got this gift for all my efforts.


Haha @Krunal_Sheth yeah, but I’m done with coding and with full-time employment too (at least for now). Burned out as a coder long ago. Besides, tinkering with Coda is much more fun, and I still get to apply my skills like in this very trick :wink:

What I’d really love though is to eventually come to the Bay Area for a week or two. Maybe speak at some no code conf about my Coda witchcraft. And also buy the laptop I want (the Surface) but cannot buy here — I didn’t win one in the Makers Fest, but I still need one :slightly_smiling_face:


This is seriously amazing :clap::clap::clap:

Looking forward to following codatricks.com in the new year.


awesome! thanks much @Paul_Danyliuk

1 Like

hey @Paul_Danyliuk, great stuff here as always. Sorry if I am overly self-promoting here, but would love to get this native in Coda, and I just added some commentary to that effect over on the other MindMap thread:

Unfortunately I don’t think my Coda abilities would allow me to use your solution without slipping up, but really amazing to see you can actually already do this in Coda. It is a huge item on my wish list!


I have created this Pack request: ObservableHQ. With a good integration between Coda and Observable, we could extend Coda to include all kind of user generated visualisations, including Mind Map and without resorting to low level SVG trickery. Please vote for it!

Looked at Observable — isn’t the idea is just that you can feed it HTML/JS (low level as well) to render inline? The D3 chart in example is itself an iframe.

Wouldn’t it be better at this point to just ask Coda to support providing arbitrary HTML content within Embed() and not just URLs? Because embedding an Observable with embedded chart made out of arbitrary HTML content sounds like the same, only with extra steps

That said, the tool looks awesome. But it doesn’t seem friendly towards non-devs: a certain level of JS knowledge is required to actually make something useful there.

P.S. I wish it was around / I knew about it when I was teaching CS basics at a local university. Much better to get students excited about coding with something visual like that rather than a boring console.

Observable is 2 things: a javascript library that provides a notebook functionality & a collection of user-generated notebooks. If you look at example #4, the integration can be really easy with a function. In Coda, it would look like:

= Observable(
  showCells:['chart', 'height']
  variables: @VariablesTable)

That’s quite friendly towards non-devs, as long as they can find the notebook they need, and Coda templates are a good fit for packaging all this configuration and more.

But in general, yes I would like also support for embedding arbitrary HTML with Embed(), that would ease some integrations.


I would like to petition that Coda bring this in on its own, and not go for an integration, in particular after seeing what you already pulled off @Paul_Danyliuk above in this thread!

I think the proper tools in this context are not things with any strings whatsoever of formulas, code snippets, etc. for “non devs,” but stuff like draw.io, Lucidchart, Miro. As a non-dev myself, those are the tools I am going to consider for mindmapping initially outside Coda. Some task management apps that Coda can replace such as MindMeister and Zenkit also have mind mapping modules that literally do not require any capability with any formulas, functions, etc. In other words, true nocode!

So I would in fact no longer support this pack suggestion:

And rather see Coda devote time to its own solution here.

And let’s not forget that integrations, or packs, always have some overhead with the potential to break, and require a developer to get involved to figure out what happened!

Thanks guys!

Hi @Paul_Danyliuk! This is really amazing!
Any ideas on how to make a horizontal map (left to right)?


Thanks. I believe pretty much the same, just swap around x/y and width/height in a few places.

Thanks Paul! I have looked but it’s too complex for me! Would you or anyone here be able to help with these?
I would love to have this amazing mind map in a horizontal view.

Help anyone?
Thanks in advance!

I can help you with this tomorrow or someday this week (off the clock if it’s for personal matters). I believe we talked already (Value cases) :slight_smile:

Hi Paul! Yes, we spoke before :slight_smile:
This would be for personal docs, and I think really useful for everyone in the community!
Thanks for looking into this

Didn’t have time today, sorry. Will look into this tomorrow.

Here you go @Marta_Oliveira

Just swapped a few formulas around (for _X center, _Y center, and canvas width/height), mostly by intuition, and it worked:


Hi Paul,
Thanks a lot, this looks amazing!
It will be super useful

Hi again Paul, this is really amazing!
I have been using it and was wondering if there’s a way to increase the character length of the boxes in the tree chart?
Just wondering if you think this is possible

What do you mean? You mean change box width? It’s here:

Or do you mean text size? Then add ; font-size: 16px or whatever text size value here:

Hey @Paul_Danyliuk,

Hope you are doing well.

Further to Marta’s question, could you please help me figure out how to items change height if text becomes longer? Ideally it increase in height vertically and text is on 2/3 lines.