Ability to add diagrams (diagram editor)

Feature Requests
, ,
1

Is your feature request related to a problem? Please describe.

Some things are better drawn than explained. For example networking topology. A way to make diagrams directly in anytype would help for such things.

Describe the solution you’d like

I know that [draw.io ](https://www.diagrams.net/) can be integrated in applications. Used it in Bookstack for a longer time.

Would be nice to create and edit a diagram from anytype or start the draw.io app from anytype and somehow directly import the new or changed diagram. Thats nearly how it works in [Bookstack](https://www.bookstackapp.com/).

Additional context

Of course it wouldnt be good way to import the whole draw.io app into anytype or something similiar and not anybody would need it. So maybe make it optional or maybe in the future, if plugins or optional packages become a thing in anytype.

[Github for the source code of the app](GitHub - jgraph/drawio: draw.io is a JavaScript, client-side editor for general diagramming and whiteboarding)

20 Likes
2

Another application similar to draw.io is [coggle.it](https://coggle.it/). However, I am unsure if it can be integrated with anytype or not. The developer team may look into this.

2 Likes
3

This would be amazing

1 Like
4

Also https://excalidraw.com/ :slight_smile:

5

Mermaid support would be extremely helpful and would fit with the markdown model of AnyType https://mermaid-js.github.io/mermaid/#/

This may be a duplicate but I made this https://community.anytype.io/d/725-mermaid-graph-support to better track specifically Mermaid support. Both are of interest imo, but this one seems focused on more of a package integration with existing tools.

Edit by @sambouwer: I merged your topic into this topic (see posts below).

5 Likes
6

Would be great to have an integrated tool similar to Monodraw, to create diagrams, mindmaps, etc. inline with text, which could be easily exported to markdown.

Basic shapes:

  • ellipse
  • rectangle
  • line

Unlike ASCII Flow shapes in Monodraw are groups of chars that can be moved together on the canvas.

MindMap

1072×712 283 KB

Flowchart

1072×712 323 KB

13

Please forgive me for making a post, I know I mentioned it in a comment but I figure an individual post would make it easier to track interest

Is your feature request related to a problem? Please describe.

I think it’d be pretty great if we could build graphs in AnyType, most graph platforms are clunky or have massive UI implications, one that I really like is Mermaid, the graphs are built using a markdown like syntax, and generated on device

Describe the solution you’d like

Implementing https://mermaid-js.github.io/mermaid/#/ inside the editor would be awesome

Describe alternatives you’ve considered

I saw someone talk about something like draw.io but imo that’s too much of it’s own product to fully package into AnyType in a nice elegant way

Additional context

Mermaid supports all kinds of graphs, it’s basically a wrapper around .dot files, but it’s quite nice because it’s easily interpreted by humans

A->B would create a graph with two vertices, with an edge connecting them, this can scale for large complex diagrams too.

17 Likes
14

@fyne You are always welcome, even encouraged, to post uniquely different requests as their own Topic here. They are easier to track and prioritize that way. Thanks for the idea!

1 Like
15

@fyne +1 for your idea.

Mermaid is so powerful for sequence diagram and class diagram. some editors of mardown already integrate it.

3 Likes
16

This would make a great plugin. Adding to https://community.anytype.io/t/-/1397

17

Mermaid is well supported by many other tools like notion and obsidian. It works as an additional Markdown code block.
Something like:

Graph TD
A-->B;
B-->C;

can make a great flowchart.

Hope to see Anytype support this in the future.

1 Like
18

For now there are no plans to introduce this type of diagrams, maybe it can be possible after public release but not earlier. But we are working on already existing graph experience to make it more useful.

1 Like
19

Ability to add diagram only is not sufficient as I think. Anytype needs a visual collaboration boards like Miro as object.

:slight_smile: Where you can create mind maps and easily connect any objects over mind maps. You can create diagrams too in Miro, like you need an ability to add diagrams.

Please check it out :point_down:
My Feature Request

20

As a workaround, you can create a mermaid diagram at https://mermaid.live/ and then under “Actions” (bottom of the page) click “Copy Markdown” and paste it into Anytype. This should render the diagram as an image link in Anytype.

21

The graph view is built on D3, and I’m wondering if there’s a diagram solution that’s also built on it. It wouldn’t really be a natural fit, but D3’s shape, interaction, and layout libraries aren’t the worst foundation in the world, so someone might have done it.

If they have, it might help judge the feasibility of Anytype building a diagram solution that works on D3. This could have a lot of benefits. For one, it could make the diagram solution integratable with the graph view, something no external solution could possibly offer. For another, it means users and developers skilled in D3 will be able to apply the knowledge more deeply when they work Anytype itself or on extensions for it.

22

I believe that mermaid.js uses d3.js for drawing. This is quoted from their GitHub repo: “Many thanks to the d3 and dagre-d3 projects for providing the graphical layout and drawing libraries!”

1 Like