Super FR: Visual/Spatial Note Taking - Whiteboard - Mind Map - Concept Map

[WhiteNoise]

This thread is to consolide various requests about adding a whiteboard view among a selected subset of notes in the vault.
The goal of this view is to recreate a whiteboard/corkboard user experience (à la miro) as opposed to the automatically generated graph view.

There are several levels to this request:

1. Create a board where and let the user manually select some notes to be there
2. Let the user decide/fix the notes’ position
3. Let the user save and restore a board
4. Let user create new notes
5. Let the user visually add links among notes (implemented via a YAML attribute)
6. Finally, add the option to edit the content of the notes without leaving the board.

At this moment, there are no commitments that this will be implemented first party by Obsidian.
It’s possible that each of the above points will be extracted to its own FR over time.

Remarks

This should not be confused with mindmap representation of a single note https://forum.obsidian.md/t/represent-and-edit-a-single-note-as-a-mindmap/3738. There are already plugins for this.

Related FRs

This topic is somewhat related to (but not the same as) https://forum.obsidian.md/t/add-support-for-link-types/6994

[miguelmarcos]

Here’s a consolidated list of features from all three posts. I have not spent time to remove possible redundancies.

From Mind Mapping Interface

1. Create a board where and let the user manually select some notes to be there
2. Let the user decide/fix the notes’ position
3. Let the user save and restore a board
4. Let user create new notes
5. Let the user visually add links among notes (implemented via a YAML attribute)
6. Option to edit the content of the notes without leaving the board

From Visual Management like Heptabase

1. Lay out my notes as cards on a canvas
2. Let me draw arrows between them
3. Let me use the wikilinks to jump around
4. If I click on a wikilink for a card that is not yet on the canvas, place it there.

Implement a Tangents-like note-creating mindmap

1. A mindmap is generated based on a folder of notes or can be blank where the user manually adds nodes
2. The notes are linked together in parent-child relationships as on a standard mindmap
3. The mindmap lets you create new notes on the fly
4. The mindmap can be saved as recoverable workspace of notes
5. Dynamic remapping where nodes can be manually moved, removed or added (example: if a grandparent note has a parent note and multiple child notes, you can remove the parent note and the mindmap will redraw connections between grandparent and child)
6. Dynamic connecting where connections can be manually moved, removed or added
7. The ability to create directed acyclic graphs

[callan]

I have an idea for a plugin that would really help my workflow when doing sensemaking of information.

The idea

A WYSIWYG map editor or digital whiteboard where you can create and connect cards with annotations to create non-linear concept maps. It is functionally similar to digital whiteboarding tools like Miro, but allows your cards to reference notes in your vault.

Isn’t this just graph view?

No, Graph view visualises the connections between your notes, rather than letting you explore and generate visual connections manually. It also doesn’t require that the cards are links in your vault, where as the nodes in graph view does.

Isn’t it just a mind map?

No, Mindmaps are linear and hierarchical. Concept maps are more organic, allow you to create cards and then connect them.

Key features

• Create ‘cards’ or ‘post-its’ on a board and write in them (similar to cards in kanban)
• Add links to cards using wikilinks
• Connect cards and annotate connection

Here is a screencap of how it works I’m Miro

Nice to have features

• Style cards, links and labels
• Auto style types of cards using tags or YAML
• Drag cards into each other to group
• Export as image or PDF

Would replace

• Miro
• Plectica
• Milanote
• Tinderbox
• Cmap

But, would allow you to link the cards to other notes in your vault using the [[wiki link]] syntax

Similar to plugins, that don’t quite answer this need

• Juggl
• Breadcrumbs
• Kanban
• Mindmap

My current workflow

Make the map in Miro, and embed it in the relevant note.

This could be improved by having it in Obsidian as I could add wikilinks directly, and save time copying and pasting back and for the between tools.

Key challenges

Unlike hierarchical or structured visualisations like kanban and mind maps, it is unclear how the map information would be stored as markdown. There may need to be some additional code to store the positions and styles of the map.

Plectica allows you to export maps as markdown, using position to determine order. (top left first), but it is unclear how you would store this the other way.

Why don’t you just do it yourself?

I’m a strategist, researcher and designer. I have no real coding experience so would need someone to build it, but I can do visual design if that is helpful.

[mgmeyers]

I’ll throw in Scapple | Literature & Latte as another good example of this.

[SkepticMystic]

I really like this idea. Having concept maps would be super useful.

This is something Emile and I are considering already. The idea is to use the Juggl API to visualize the Breadcrumbs structure.

I am curious, doesnt Excalidraw allow you to do most of this? Iirc, you can add links in the drawing, so you have the freedom to create the map however you want, and can create links.
But this does have limitations too.

If this were an entirely new plugin, I don’t think storing the graph would be a problem.

[cristian]

I think something important is to keep using regular files, using markdown+metadata.

As an example you can look at the excalidraw plugin 1.2.0, it allows you to have links and the text is kept in markdown so it’s searchable, replaceable, etc.

Obsidian-Excalidraw 1.2.0 Walkthrough Part 7/10: Markdown Features

[cristian]

@callan

Make the map in Miro, and embed it in the relevant note.

I do the same, also diagrams from software diagraming tools like Magicdraw or
Archimate. The problem is that suddenly we rename something and these changes are not reflected. We need a tool for thinking that helps to maintain our diagrams.

[lucasd]

This is a brilliant idea! And it’s great to hear that SkepticMystic and Emile are considering something like it.

@callan

Unlike hierarchical or structured visualisations like kanban and mind maps, it is unclear how the map information would be stored as markdown.

I like the way CmapTools generates a text outline of the concept map. In that program, if the concept map has any circularity, the text outline can be expanded “infinitely”, but I think there would be a workable way to encode the concept map in a Markdown file. For example, if we say that * indicates a ‘card’ and - indicates a link, the Markdown text for @callan’s concept map could be something like the following:

* [[Co-design]]
  - is
    * A form of participatory design
      - with roots in
        * [[Scandinavian design]]
      - with roots in
        * Corporate and industrial design
      - that
        * Shares power
          - similar to
            * [[Action research]]
        * Involves non-designers in the design process
  - can be
    * Can be difficult for government to implement
      - because
        * Shares power

The parser would either need to recognize that lines with the same text should be the same card (both occurrences of “Shares power” in this example), or else there could be a way for the parser to work with block references, so that the second occurrence of “Shares power” would be a block reference of the first.

So, the hierarchy would simply be a way of encoding the relationships between linked cards, and it would not enforce a tree structure. (Map position and so forth would need to be encoded separately.)

Ideally, with this kind of approach, one could edit text either in the underlying Markdown file or in the WYSIWYG whiteboard.

(Is this sufficiently in keeping with the original idea?)

[Emile]

Some ideas here from me:

1. I like the idea of having nodes that are not notes in your vault. Indeed, for things like ‘arguments’ or things that clearly aren’t ‘entities’, I’d not create a note either. The challenge is in representing this in data, as you mention. That is, where to store the text on a node? Should it be in some file that links to it? But some nodes (such as ‘Involes non-designers in the design process’) does not have any incoming links from a wikilink! So I like @lucasd’s idea, but I don’t see where to store this if you were to create this in a WYSIWYG sense.
2. Storing a graph with positional information and hidden nodes is already possible in Juggl, but not in a Markdown-like format. This sounds really hard to do, and I doubt it’d be useful in any sense (it’d just be a huge list of coordinates and links to nodes…). I think storing it as a regular data/.json file should be enough there.
3. WYSIWYG for Juggl is somewhat in the plans (see https://github.com/HEmile/juggl/issues/30 and https://github.com/HEmile/juggl/issues/71), however writing text on a node like in Miro could be challenging. I think it might be possible there, though!

If you don’t need to explore the graph like in a graph view, I do wonder how Excalidraw would not work here, as others have mentioned

[callan]

I hadn’t tried Excalidraw for this. I have been giving it a shot this week. It nearly works for it. Or, should I say it does work, but it feels pretty clunky. The main issues for me are text and boxes (cards) are treated separately, rather than text within a box. Same with labels on arrows, so once you start getting a larger concept map it can be pretty fiddly to move things around. I know this sounds like a bit of a petty gripe, but when you are trying to get flow and map out ideas having to constantly fix the styling really breaks your flow and you end up fighting against the software rather than mapping.

I think the way Excalidraw tracks text elements eg ^m4TvMX0P could be useful though?

[Kenelm]

I have had good success adding CMAP concept maps to JIRA and CONFLUENCE by

1. rendering the image of the concept map to .PDF (cmaptool does this)
2. embedding the “.cmap” file as data within the .PDF (mupdf can do this)
3. adding the .PDF to the JIRA issue or Confluence page (normal .pdf add)

The same idea can work here with Obsidian.

1. Obsidian can store and view .PDF
2. .PDF can contain binary data and hence store the .cmap source
3. Plugin can retrieve .cmap source, manipulate/query as desired with cmaptool, and pass information to Obsidian.

[rupadarshiray]

I came after reading about this in Obsidian Roundup, and wanted to make this idea more rigorous and general as it is in my head: think of the “WYSIWYG editor” as having these different types of views:

1. Lists/Outline
2. Kanban
3. Calendar
4. Concept-map (as told by OP, I just called them mind-maps though)
5. Timeline
6. Table
7. Draw (freehand, shapes)

• The “views” 1, 2, 3, 5 and 6 are available in Notion and we have 1, 2, 6 and 7 in Obsidian itself now.
• These “create notes” from themselves, as opposed to Graph view, Calendar community Mind-map community plugin, etc. making use of available notes to create a “pre-view” of them.
• A simpler example (1): working in an unordered list we “Outline” the information and adding a [[ ]] creates a potential note from that list itself.
• Next up we have Kanban (2) that creates a visual “board” for the information.
• (6) is partly available in two ways: Dataview or making a simple table itself (and that in my opinion is a superpower!)
• I would really love all the others too be available in Obsidian too~!

[andyfreeland]

You can do this with Excalidraw, though its not quite as seamless as I’d like.

Here’s an example of a new app that puts these spatial whiteboards/surfaces front and center alongside docs/notes. It’s a really nice UX. https://cloverapp.co/

[cristian]

@Emile

Storing a graph with positional information and hidden nodes is already possible in Juggl, but not in a Markdown-like format. This sounds really hard to do, and I doubt it’d be useful in any sense (it’d just be a huge list of coordinates and links to nodes…). I think storing it as a regular data/.json file should be enough there.

I don’t know if juggle needs it, but the markdown-like format helps to keep consistency through all apps: Lists/Outline. Kanban, Calendar, Concept-map, etc. It enables ‘refactor’ and keeping names and links consistent.

A good example of such diagraming tools is the ones dedicated to software architecture… .(magicdraw, archimate, etc)

I believe this is useful in setups where you have several diagrams with few nodes each (<100), interconnected through links

[midas0441]

This is a great idea — drawing concept maps where each “card” or node is a note in the obsidian vault.

I posted a request similar to this one:

Developing ideas by working with notes on a canvas

[mgmeyers]

Not sure if this adds anything useful to the conversation, but one idea I played with (and am still considering) for the Kanban plugin is doing something like this to store arbitrary data:

- Card one ^id1
- Card two ^id2



...at the bottom of the file...

```kanban:data
{
	id1: { ...whatever },
	id2: { ...whatever },
}
```

[Emile]

Fair enough, and I think in your example that makes a lot of sense (especially since each note clearly represents a unique Kanban). But for Juggl, those would be like 500kb json files, that are only going to be interpretable by Juggl. I’m not really comfortable appending those to user files I think.

[callan]

Something like that would be great

[mdroid]

@SkepticMystic

This is something Emile and I are considering already.

Are you and @Emile still considering something like this?

[mdroid]

This looks similar to Argdown or flowchart.fun

Argdown

• https://argdown.org/
• Argdown Obsidian Plugin

Flowchart.fun

• Flowchart Fun - Online text to flowchart creator