If possible add diagrams.net or if you know it as draw.io embeds to those available in Anytype
Add diagram.net/draw.io embeds to the list of those available in Anytype
I and hopefully others would have access to more useful embeds
Make your own whiteboard/canvas/mind mapping features which I’m still dreaming for one day. But this will help a bit until then.
Thanks for your FR, @Axis!
Although we already have some Embeds for diagrams, I must say that the GUI on drawio.com (wich leads to Flowchart Maker & Online Diagram Software) is in deed more then great!
It so easy to use and absolutely nice in it’s visualizations!
With our given Embeds we can already do a lot of mighty stuff by using PlantUML. But it’s hard to create a complex diagram via text input.
Do you know if drawio.com can somehow output PlantUML code?
I couldn’t find any useful export formats. PNG didn’t work
So I voted for your request!
I would default to asking you if It does haha. I’ve just used it for various diagrams I’ve made in the past. I don’t know much about plantUML but it looks like you can import it looking it up I found.
Arrange >> Insert >> Advanced >> PlantUML
So I would hope there is some to also go about exporting but I am not positive. I’ll be learning more about PlantUML though something new to learn is always a fun endeavor.
It can export html.
To load such an exported page into a browser works. But we want it in Anytype off course.
The GraphViz Embed can render html, but not without a lot of rework on it.
Here an example (it works in GraphViz but comes not from drawio):
digraph structs {
node [shape=plaintext]
struct1 [label=<
<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD>left</TD><TD PORT="f1">mid dle</TD><TD PORT="f2">right</TD></TR>
</TABLE>>];
struct2 [label=<
<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD PORT="f0">one</TD><TD>two</TD></TR>
</TABLE>>];
struct3 [label=<
<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="4">
<TR>
<TD ROWSPAN="3">hello<BR/>world</TD>
<TD COLSPAN="3">b</TD>
<TD ROWSPAN="3">g</TD>
<TD ROWSPAN="3">h</TD>
</TR>
<TR>
<TD>c</TD><TD PORT="here">d</TD><TD>e</TD>
</TR>
<TR>
<TD COLSPAN="3">f</TD>
</TR>
</TABLE>>];
struct1:f1 -> struct2:f0;
struct1:f2 -> struct3:here;
}
Another example:
digraph G {
rankdir=LR
node [shape=plaintext]
a [
label=<
<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
<TR><TD ROWSPAN="3" BGCOLOR="yellow">class</TD></TR>
<TR><TD PORT="here" BGCOLOR="lightblue">qualifier</TD></TR>
</TABLE>>
]
b [shape=ellipse style=filled
label=<
<TABLE BGCOLOR="bisque">
<TR>
<TD COLSPAN="3">elephant</TD>
<TD ROWSPAN="2" BGCOLOR="chartreuse"
VALIGN="bottom" ALIGN="right">two</TD>
</TR>
<TR>
<TD COLSPAN="2" ROWSPAN="2">
<TABLE BGCOLOR="grey">
<TR><TD>corn</TD></TR>
<TR><TD BGCOLOR="yellow">c</TD></TR>
<TR><TD>f</TD></TR>
</TABLE>
</TD>
<TD BGCOLOR="white">penguin</TD>
</TR>
<TR>
<TD COLSPAN="2" BORDER="4" ALIGN="right" PORT="there">4</TD>
</TR>
</TABLE>>
]
c [
label=<long line 1<BR/>line 2<BR ALIGN="LEFT"/>line 3<BR ALIGN="RIGHT"/>>
]
subgraph { rank=same b c }
a:here -> b:there [dir=both arrowtail=diamond]
c -> b
d [shape=triangle]
d -> c [label=<
<TABLE>
<TR>
<TD BGCOLOR="red" WIDTH="10"> </TD>
<TD>Edge labels<BR/>also</TD>
<TD BGCOLOR="blue" WIDTH="10"> </TD>
</TR>
</TABLE>>
]
}
.
I attach an unmodified html export from drawio.com as zip.
It doesn’t work in the GraphViz embed.
But when you load the extracted html file into the Brave browser, then you can even use the expanders in the tables!
(Firefox can’t show the diagram at all!)
That means, that Brave embeds it somehow, it’s not only a simple static thing but a dynamic one.
Maybe also Chrome can do it.
drawio.drawio.zip (4.9 KB)
I tried an export of my own to HTML and opened it in Vivaldi and it worked its built on Chromium.
I don’t need it at the moment…
But Diagrams.net/draw.io is a top product that I use and recommend in my business environment.
So if it’s available in Anytype, it’s bound to be interesting, I’m going to follow this request!
For exemple, a floorplan (from Github)
<iframe frameborder="0" style="width:100%;height:993px;" src="https://viewer.diagrams.net/?tags=%7B%7D&highlight=0000ff&edit=_blank&layers=1&nav=1#R%3Cmxfile%20pages%3D%222%22%3E%3Cdiagram%20id%3D%22qyhxYtYtRRXXpOeD1q0_%22%20name%3D%22Ground%20floor%22%3E7Z1td6I4FIB%2FjR%2FlkITXj7Xv23Z3W2dmZ%2BdLDwpqWiQuYLXz6xcErJCrYksw3dme06kGBvE%2Bucl9S%2BiQ0%2BnyMnRmkzvmen4Hq%2B6yQ846GCPD0JI%2Factr3oKImrWMQ%2BrmbW8NffrTyxuL0%2BbU9aLSiTFjfkxn5cYhCwJvGJfanDBki%2FJpI%2BaXP3XmjD2uoT90fL71L%2BrGk6zVwuZb%2B5VHx5Pik5FhZ0emTnFy%2Fk2iieOyxUYTOe%2BQ05CxOHs1XZ56fiq9Qi7Z%2F7vYcvTk9XRJ74ffbvtXpjMenY%2Fn8%2FNuLu0Xx5%2Fn93%2FnOdE89KZeEEf5fcSvxZfz2fDZS6%2BHOqRXfKEwOfXdN2Ah7g4mmXiwiqf8DdAgedWL4pA9r%2BWbSKY3iad%2Bfl%2B%2BM%2FD8P1lEY8qCpC3MpN178cKYJqBuK8en1HXT6%2Fccn47TBt8bbZ5%2Fkjevz%2BO%2F%2BE7ZJpfxlhudI5fOpcemXhy%2BJqfkRw0z7wp539eKnrB460h63jTZ7EN5m5N33fH6ym80khc5kEPgYA6OxjNJ%2BuksfenSpNNEK5n2XBomypXJN2Lz9O57iwmNvf7MGaYnLxL1L2OrSH%2FGaNoDk0%2FQex39bBePFfCeM3weh2weuKfMZ%2BHq1sho9SOMl62WeJmE56UBvAQCIzwwRT8c2cKL4vrEholcvbAWs5il14iSS9Jg%2FCV9c9a1joiQmKiE0DZ4hNi2eYaaMIQGh9CoB7B5WgMWx2z6BqyXvz%2Fr6kdkZpa1DgFKhwCtE0fMbGKUDFh4yChZTGqfYJhEZV6a2uIoOXi9vhr4Y%2FLdwD%2B%2B%2FaH%2FeX3qa13e5NAUwNb4n1gxr2lKYaTuZaYrBH0cG1Nvn37%2Fef%2FQD%2Bir6s3%2F7k%2FVKYDtYh4GNE6s1UNN0W7w477f%2FbIMzr2HS3xNJ4Pwukv4yZPrEysOKwtY3U%2Bev6ud36s%2BHlPfa3cgpPN4SAMaBYvO2i%2B6beb3epLZkBxsNnAzWKGh0%2BU49SaVkc9YOPOdQHFDL4pW50AaKwpM1ZqwNB6MAXBBqjAw%2FNx0XDADz3102XywxZFqhoOu7jfM1353CYTVAIibp78m93RwTjDunz8Nb3tPeNLVbclAhN4omZG80IlZ22qCLUspj2C6pvOKgnk%2Bhig8mnQDmBc9Pw5ZGLQ%2BiFXMa83m0SAMRSEQEaU7vEt0XDjpP7FQBAouK4imIYXnoJk8Br0B8wumwAeDjkth9erRd6YzkSjMylCFgLmEYEWQtQWSIHzU9r%2BuD%2BXpHHAg29SEOo5Cq%2FKP2MhJTghZ7OQf09V0kQ4IKQOxbYXwDqIBTBK6qhiisCDZ1GLI5kOhdlTFT7cAKxfKFwizogqfUxoCI9%2BJH%2BOXim6kVr5AKhXnAxquEKQbTcS7YOOWj5wcF8uAseehE3kVLrZaMXU9JxI5rWC1PLUTwF1HUChZ2Myuy6ZAB5Ia%2BXT2rZMFx9LXVx2xkbAqQa0wUo9GsPBapSE4nDg0FBnzqiRBE%2Beet84QYAlgUQRks85EE9A0JBeBYsLbRSDNaMw%2BKJF1EY8zKC6r7pZUpa9qQO4QQXkN1ETyEO6tso34RW9dVx%2FBttJu8AdEavmuCrkNwgYL2UJLoPiB0gzhRAqfAhhLWgUkWwJjL6Dt8dmPEnrtbNOZQvxN1zvASGSLle9FklWgidKYQkVkwVMj01TIMrkcna2s%2B3aGe1yxFYHpVwU9Y1H50UI20pkq60zkehwGUsmCYjuwpGoYdfsqYaJZVnE9osu0hgLoZ7sh7e9nR5NOjRDLm7IdX05woQ9USieoko6XV29O%2FbhLA05uHyo6h4fIGpHigyp9oHJn%2Fk7fkSg3SnwIUDoHdXNxk4ts1tjC8f3TIks%2BoumbdY2cuvpphoRRVhSoShjMiTcxcYEgZLPBFjRY2Q%2FNdPu90t5iJggStmy1O2mvF9vfiWwIUA3z49N2eE06acs4zovt8VWDG9vAGN8qBCJdl98NQZQRVKl2howgMMWDhYGRLWa7HosgBBt5OzHGEAKHK0BRxAGRLYob0eD5EUNJ00bMo2r5rGbwtYE6UJFWVNk2D%2BCTzReChqqKYoAFOYL8aRiLbIarm7x4yNdBcVGOekH0j0IhQNDRAnRF2EoA7ZPpSiNTeMW%2BhfKupE3bSpNNM6QYsKClmeBMLiysoUtn8%2B4yrZonoNckYAoDIFutYK0IHz91NE8GKuOExixdGBrZCptCJxh7KzNX0NTNxb%2Bh9ZQY0A5Rdq5RQzs%2BuET4HULa7x%2Bv6yRbMTvNTz%2BGNDjA6%2B%2BM7enCqvSBLZc4PFty3s2lt0kNi1ADVFuYRWhi4aq9m0b91VCKim1z4xeYlzSldIbVoiCtGibchpjKRTtONFnLl1PwrftkVDU%2F28cNZ3%2FTy6a9TFXSjYZWO80hI3kVsDhdnZPVqtcYE%2FLCu2zrseLkgK32IxPGWrcUzVR1y8JEx7aGEMfa1BVkGhsniUENFhxIFwc9khNVXa1rgIVNPJgmAqIgGNnioeK9KA4BtJanzYogGaM8R%2FKjqmxMyMm1FbPNHWtkq59II6O32c6HNcq%2FDoZQMUJNKAgKaIfVgCMFil%2FedH47cR6zzZwZTEBGJ01wir8KAdACYSl%2BGIJsS9ZjRn0vFqkGuDJNAxv%2FQHs5CCMgmw0bTdiC2%2FNn66Kfw53H8lQM7VDWcgm%2BlLVGB1lKKzrNTxHA6ERAL0KYkYRks5KkyJKBu8lBBUjCsMiWCFiVu1Tr4Ldu3nD4vP3OfbaJKOsVywZg4MSTeD4QpwK4BgITGpuEmU5YNtMpHZu%2BHiG%2FUFnDA0bSITTiXAtcw6bKEgz19uVpLOtQ3Z8VzjqAG7SKElWNSN1BWYc68twNrf4aAUU1CLFUbCHDVpHGx6YRMRUr6X3rX9KmaGvYlf%2B1PESL9BFSMMHE1ohhINtExbNCNicEQyllJlqlL5vpKjjAV12wc%2FQIX5GIkgpA27WnOqpuH2oAhpOo8lN4R3DpIq%2FiF7NVpn1IN9pMm5JPFnptLWkHbXLQatKOYMnICPasMZHMs5Zua%2BPjqIZeBEULLpCj0maiQr4lb8fiUp3Pa5Z6iCMjXa1HfTLNpTW0GsFzUY9OhLHIZv4eK6tRrX%2BFo%2BdQ6FBYfEqTzgRudC8BXJK3XT%2FDJ0rcn8zcbQAC91hJEEIzPsfXyAv%2FGDyl%2FixWV0%2BM25RxQea%2Bd3m%2BXAwGd1%2BuHr7rtj84s40u3vgSOckWa8Cru15AC2xsoKNq7xBS8nZDTjXk5ieGd%2FbedWKnQ05Wz33GF4k88emtcTadTH%2B7%2B%2FHw9fLvk7HzXaOLsrjhXTV2y7tdxyJ2aBjVtpS2d5%2BDqtDsEnDQ24O8jXdkUuUATiQE3jjczSgKFGGUHx4oALST3QeXgjSjT8AWNaACNYOAm%2B2n57Pbn9GL%2B%2FCo%2F7Burq7736%2B%2BAE%2FpfGBJZ86hRbwoCmOMRrQ8cWzd0y%2F0Qu%2Fm4cYb6O7Fhf5w0Z1dWcDndrDhp%2B7FiAVxCZ7xz5wVB7oR%2FZm0niQnYDRbvh1MXo3Tvzc0Hk68oLhYclfZ9bKjnCGTkIvL8Ounj0IvuZl89kx7Ff%2BkWGces%2ByGt%2FSrnUgOMF%2B4p49xHQ1S9SYsdhAuFJZrAu4tfaHBODkcrvroL4R4vT9MsYmPyW%2F0DT7mTxhjvqam57kZl2MCSLtCP3uLRQLR9IpxVBS47LWORAHhQ7E9J578OkTWD30o%2FBMbICKq8A8kwgdhr5IrJy1sNKJD7xfBUnm%2BFrhlBrQxw%2Fu8iKS%2FxxvHLlOz%2Bo65qf15%2Fi8%3D%3C%2Fdiagram%3E%3Cdiagram%20id%3D%22L6DmhmJMZRUGYAgaX4iw%22%20name%3D%22Rooftop%20terrace%22%3E7Z1bW%2BI4GIB%2FDZfladMD7SWHccbdcdbRmVH3xifQApXSYFsE%2FPWbnpQ2H1LcpsRhvNASQknz5jvmYEvtz9efA7yYXhDb8VpIttctddBCSEGGTv%2FEJZu0xFJQWjAJXDur9Fpw7T47WaGclS5d2wkLFSNCvMhdFAtHxPedUVQow0FAVsVqY%2BIVv3WBJw5TcD3CHlt649rRNC01Uee1%2FIvjTqb5NyuGlb4zx3nl7EnCKbbJaqtI%2FdRS%2BwEhUXo1X%2FcdL%2B68vF%2Fu%2FeVc%2BnGhDWb4W0fSF39HkiSlNzvb8ZGe%2FHSmGyNZvb%2B4vRr%2BItLV5ffsI%2FIT9pbZQ104OFwGztzxozBrXLTJn9gjo5kT309pqb38KQNatd5W6RbTLNRW5kxzaLct4kvbpc0NXeLTVtluQFkn14OQLOOO7q2mbuRcL%2FAorryig5GWTaO5lz0I9txJXN1zxvRBegvixs9Ov0HvtfQBLXlygsil3LtZxblr23Ebeh4eOl4Pj2aTgCx9u088EiRNU8fJD9tFb1KgX%2BOst8ZW1mWfHTJ3omBDq2TvGmY2xjLJ6WR3WL0OQy0rmm6NQCRnhTgb%2BZOXO78iohcZpQOIGexAsqrxqshmRHvQCSrRGZIoInP6Rkjv6vqTXvZ6IOnHRFYkprDEDBlAptVAzPjr0Zb0C8X4Ej6O76SHp%2FXMASRfP1zAfBIcImBB%2BlwfQcJyPocJmFqHgE31RZecbX71LvG3m2v5OVj5S0lhcbW1Pxpxp0Y0UEViqAZim5vZ%2Bf1M7m3MpfFFNu%2Fw2VVf0hliZ8vAdyNqXGuxnLfdCcEEPz50Rz35x7%2FBqDtfS6rJfCszRnJ2X2NUlyR0s7Hxoje3BkKZc0QWkFLOh918PYldvfbYIyRYeNhvDwmZjXDo7FAcbE%2B82Zfv1baA%2BKrAYFDUGgYDyEVj1e1xucS%2FIo4AOqgAALJ3WocloCucAKisS3lcACEZY1ohIBHOvkbSdI5AFKXkgAAKUrfaeT8VoPCSCrUjGJQd2mrlhDxlpYwG0FYKpK7q0Fag4bFE01Z24IRhUmcbC41UeWJ5UVC7sXQAKnVIC0jFFM62O%2Fa9TZZDrywvnMGoCLX1fWgQFE0pJjc4otmXo4iMjo4mMrCBQfupJHFKktSS9wdGUCzFqzON%2FZ0JWetakjywE8uGNP%2BvN7n1XKeNigpCNQGbqlntjs7HrML9V%2FdobLD%2FVEjDwv1XR8oK7r8P4i7yVgyqXFQMWm589oW3teQ6puf9B3wzeSaW%2F3QZXp0%2FXJ8DycTjghlNsZvVSOdV5EZDLd1sG2pRdyOVQQSlo3TEiZD6EQhBQtQcNQugJrfzvOK2C8NJ6YHg2MSv4OCyYLkxblTcitByPMcStQpWXixieTK2OVHLeeTILIVBluNpRMhEC94inAbVDZosuV3yKjqa0lZYx0KRjbYBsOnwiqxZBdhbul4kuT7DqP7lCXCLRJPwFfa8Pgn8pNrYjV%2B8TLvJyU%2F1%2FlAOHTp6aeINCBQQ5IzWEabCTyCar7Ny%2FUTxckNAbd4%2BBgqYDuOGQBMNAY4foHHZUIUDUyGF83vJhtYcgp%2BhE%2FwzfIiXGiI5WQix3cOe68%2FS1zaOcEvtJssL0RnlhfqPm%2Bn6LrqLrq5ubxf%2FOAPlUb5PP%2FY2TmPr2TP%2BR5vQjKibGVae56%2FJ%2BBhGgS6C8nwQ3vdkSenLLcQHSB0STh3mUrcn4m7Qb1BAwQTkso4kFkzJEI3S20arWsqRCyxYzJqEpYqWFxEXliZXhMXNI68yDSeO%2FmsIi14RC7fAWhUuTqoSxrLeRUO4wDWETa7%2FEG4N4cG8%2BEvY%2B3x93eDFzPxgPgU3MqUFueAat0YjYUs07WfTi0G%2BmgqHi3TH2thdxxnNassRa0palDWfyk6ovHjr26xMnRcr4eKnQzVfgoyXbGn7ZQvMwNYhW%2BBCDdHWaUTE9ZyoWSkqT0vq%2Beqf7TkugEquKGuHItrq0XBKVsz6RM5QSrsSdBma3%2BIVGoFUFBGdOkHcOWSVAlnQaQBoabx2kSiiuXOx0%2FA13aR3TJdBK7t3FusymJw8BhAU%2BpMeqixW4NpYTq44DEs0V%2FwAWJwFSy9tDTKAfXSQF8GNlXpyE4jl0BVCYDWKQDQjJI64GOXFKAAreDEKJ1baB7ND3MCUTA54nkKjYESzOaHrz%2B7LW4x2bteqh4pZDIcgRwA8M4GX16aJluc5BhRFfd2FLQwY0UxO1biHuy%2BNSiJksaRMYLtAHftQYVKipXlig%2FNTDO%2Bg7BwAJyAYkHeg8tsRKNrC893HgtSEwCzt3AbP6WnyYBBdtAQcbwTlcEZjc6DNAhDNReYuA8XNLwZk3BsFgE4MALu92bSOLQSihSO8GSiy3i4zOLYciBZ9cGegqSUGlsxuxGuWgWjpRe66qHTIx%2FGlQLRQjz%2BBoj02jWPLgGjLJ7gTUEsEgMNGmiUgWhDdtBY6flR2eoExGxkD5xg0yQA40%2Fv3ZsD6pE3KAXgwwakZY1YMmnRJQQSnZo31Un6iSY8UBHByxrjkDhl6cwCetQdrszHdO%2Bf7xVj%2B3h1Jn3XgdK8rQns12%2BMcVuyH%2FC5u6A5zbm8fvgE2BsoWGl7MY0z8qDAsjMclyd%2BQwuTfx3RpBaQs1q9v0qtJ%2FPcChzF4JA8dO0geL70rbV5647QaM%2FQo1Kg4wJihVB5xL4flBw5tVXrUS7LVlj1nHy8jkrZ860wTZigVe383w93TWCWZh47rVqCTO%2BvY3wm2F3HC3MPR9OTwKqUQVzNMFi%2B05I8bXijdWQdeqpjGsUJHMmUTxOdmnhLnl2nl%2FAgnaGUntHPnHZzpy9f%2FT5W8t%2FVfvtRP%2FwE%3D%3C%2Fdiagram%3E%3C%2Fmxfile%3E"></iframe>
Without iframe (this version is for Notion) :
https://viewer.diagrams.net/?border=0&tags=%7B%7D&highlight=0000ff&edit=_blank&layers=1&nav=1#R%3Cmxfile%20pages%3D%222%22%3E%3Cdiagram%20id%3D%22qyhxYtYtRRXXpOeD1q0_%22%20name%3D%22Ground%20floor%22%3E7Z1td6I4FIB%2FjR%2FlkITXj7Xv23Z3W2dmZ%2BdLDwpqWiQuYLXz6xcErJCrYksw3dme06kGBvE%2Bucl9S%2BiQ0%2BnyMnRmkzvmen4Hq%2B6yQ846GCPD0JI%2Factr3oKImrWMQ%2BrmbW8NffrTyxuL0%2BbU9aLSiTFjfkxn5cYhCwJvGJfanDBki%2FJpI%2BaXP3XmjD2uoT90fL71L%2BrGk6zVwuZb%2B5VHx5Pik5FhZ0emTnFy%2Fk2iieOyxUYTOe%2BQ05CxOHs1XZ56fiq9Qi7Z%2F7vYcvTk9XRJ74ffbvtXpjMenY%2Fn8%2FNuLu0Xx5%2Fn93%2FnOdE89KZeEEf5fcSvxZfz2fDZS6%2BHOqRXfKEwOfXdN2Ah7g4mmXiwiqf8DdAgedWL4pA9r%2BWbSKY3iad%2Bfl%2B%2BM%2FD8P1lEY8qCpC3MpN178cKYJqBuK8en1HXT6%2Fccn47TBt8bbZ5%2Fkjevz%2BO%2F%2BE7ZJpfxlhudI5fOpcemXhy%2BJqfkRw0z7wp539eKnrB460h63jTZ7EN5m5N33fH6ym80khc5kEPgYA6OxjNJ%2BuksfenSpNNEK5n2XBomypXJN2Lz9O57iwmNvf7MGaYnLxL1L2OrSH%2FGaNoDk0%2FQex39bBePFfCeM3weh2weuKfMZ%2BHq1sho9SOMl62WeJmE56UBvAQCIzwwRT8c2cKL4vrEholcvbAWs5il14iSS9Jg%2FCV9c9a1joiQmKiE0DZ4hNi2eYaaMIQGh9CoB7B5WgMWx2z6BqyXvz%2Fr6kdkZpa1DgFKhwCtE0fMbGKUDFh4yChZTGqfYJhEZV6a2uIoOXi9vhr4Y%2FLdwD%2B%2B%2FaH%2FeX3qa13e5NAUwNb4n1gxr2lKYaTuZaYrBH0cG1Nvn37%2Fef%2FQD%2Bir6s3%2F7k%2FVKYDtYh4GNE6s1UNN0W7w477f%2FbIMzr2HS3xNJ4Pwukv4yZPrEysOKwtY3U%2Bev6ud36s%2BHlPfa3cgpPN4SAMaBYvO2i%2B6beb3epLZkBxsNnAzWKGh0%2BU49SaVkc9YOPOdQHFDL4pW50AaKwpM1ZqwNB6MAXBBqjAw%2FNx0XDADz3102XywxZFqhoOu7jfM1353CYTVAIibp78m93RwTjDunz8Nb3tPeNLVbclAhN4omZG80IlZ22qCLUspj2C6pvOKgnk%2Bhig8mnQDmBc9Pw5ZGLQ%2BiFXMa83m0SAMRSEQEaU7vEt0XDjpP7FQBAouK4imIYXnoJk8Br0B8wumwAeDjkth9erRd6YzkSjMylCFgLmEYEWQtQWSIHzU9r%2BuD%2BXpHHAg29SEOo5Cq%2FKP2MhJTghZ7OQf09V0kQ4IKQOxbYXwDqIBTBK6qhiisCDZ1GLI5kOhdlTFT7cAKxfKFwizogqfUxoCI9%2BJH%2BOXim6kVr5AKhXnAxquEKQbTcS7YOOWj5wcF8uAseehE3kVLrZaMXU9JxI5rWC1PLUTwF1HUChZ2Myuy6ZAB5Ia%2BXT2rZMFx9LXVx2xkbAqQa0wUo9GsPBapSE4nDg0FBnzqiRBE%2Beet84QYAlgUQRks85EE9A0JBeBYsLbRSDNaMw%2BKJF1EY8zKC6r7pZUpa9qQO4QQXkN1ETyEO6tso34RW9dVx%2FBttJu8AdEavmuCrkNwgYL2UJLoPiB0gzhRAqfAhhLWgUkWwJjL6Dt8dmPEnrtbNOZQvxN1zvASGSLle9FklWgidKYQkVkwVMj01TIMrkcna2s%2B3aGe1yxFYHpVwU9Y1H50UI20pkq60zkehwGUsmCYjuwpGoYdfsqYaJZVnE9osu0hgLoZ7sh7e9nR5NOjRDLm7IdX05woQ9USieoko6XV29O%2FbhLA05uHyo6h4fIGpHigyp9oHJn%2Fk7fkSg3SnwIUDoHdXNxk4ts1tjC8f3TIks%2BoumbdY2cuvpphoRRVhSoShjMiTcxcYEgZLPBFjRY2Q%2FNdPu90t5iJggStmy1O2mvF9vfiWwIUA3z49N2eE06acs4zovt8VWDG9vAGN8qBCJdl98NQZQRVKl2howgMMWDhYGRLWa7HosgBBt5OzHGEAKHK0BRxAGRLYob0eD5EUNJ00bMo2r5rGbwtYE6UJFWVNk2D%2BCTzReChqqKYoAFOYL8aRiLbIarm7x4yNdBcVGOekH0j0IhQNDRAnRF2EoA7ZPpSiNTeMW%2BhfKupE3bSpNNM6QYsKClmeBMLiysoUtn8%2B4yrZonoNckYAoDIFutYK0IHz91NE8GKuOExixdGBrZCptCJxh7KzNX0NTNxb%2Bh9ZQY0A5Rdq5RQzs%2BuET4HULa7x%2Bv6yRbMTvNTz%2BGNDjA6%2B%2BM7enCqvSBLZc4PFty3s2lt0kNi1ADVFuYRWhi4aq9m0b91VCKim1z4xeYlzSldIbVoiCtGibchpjKRTtONFnLl1PwrftkVDU%2F28cNZ3%2FTy6a9TFXSjYZWO80hI3kVsDhdnZPVqtcYE%2FLCu2zrseLkgK32IxPGWrcUzVR1y8JEx7aGEMfa1BVkGhsniUENFhxIFwc9khNVXa1rgIVNPJgmAqIgGNnioeK9KA4BtJanzYogGaM8R%2FKjqmxMyMm1FbPNHWtkq59II6O32c6HNcq%2FDoZQMUJNKAgKaIfVgCMFil%2FedH47cR6zzZwZTEBGJ01wir8KAdACYSl%2BGIJsS9ZjRn0vFqkGuDJNAxv%2FQHs5CCMgmw0bTdiC2%2FNn66Kfw53H8lQM7VDWcgm%2BlLVGB1lKKzrNTxHA6ERAL0KYkYRks5KkyJKBu8lBBUjCsMiWCFiVu1Tr4Ldu3nD4vP3OfbaJKOsVywZg4MSTeD4QpwK4BgITGpuEmU5YNtMpHZu%2BHiG%2FUFnDA0bSITTiXAtcw6bKEgz19uVpLOtQ3Z8VzjqAG7SKElWNSN1BWYc68twNrf4aAUU1CLFUbCHDVpHGx6YRMRUr6X3rX9KmaGvYlf%2B1PESL9BFSMMHE1ohhINtExbNCNicEQyllJlqlL5vpKjjAV12wc%2FQIX5GIkgpA27WnOqpuH2oAhpOo8lN4R3DpIq%2FiF7NVpn1IN9pMm5JPFnptLWkHbXLQatKOYMnICPasMZHMs5Zua%2BPjqIZeBEULLpCj0maiQr4lb8fiUp3Pa5Z6iCMjXa1HfTLNpTW0GsFzUY9OhLHIZv4eK6tRrX%2BFo%2BdQ6FBYfEqTzgRudC8BXJK3XT%2FDJ0rcn8zcbQAC91hJEEIzPsfXyAv%2FGDyl%2FixWV0%2BM25RxQea%2Bd3m%2BXAwGd1%2BuHr7rtj84s40u3vgSOckWa8Cru15AC2xsoKNq7xBS8nZDTjXk5ieGd%2FbedWKnQ05Wz33GF4k88emtcTadTH%2B7%2B%2FHw9fLvk7HzXaOLsrjhXTV2y7tdxyJ2aBjVtpS2d5%2BDqtDsEnDQ24O8jXdkUuUATiQE3jjczSgKFGGUHx4oALST3QeXgjSjT8AWNaACNYOAm%2B2n57Pbn9GL%2B%2FCo%2F7Burq7736%2B%2BAE%2FpfGBJZ86hRbwoCmOMRrQ8cWzd0y%2F0Qu%2Fm4cYb6O7Fhf5w0Z1dWcDndrDhp%2B7FiAVxCZ7xz5wVB7oR%2FZm0niQnYDRbvh1MXo3Tvzc0Hk68oLhYclfZ9bKjnCGTkIvL8Ounj0IvuZl89kx7Ff%2BkWGces%2ByGt%2FSrnUgOMF%2B4p49xHQ1S9SYsdhAuFJZrAu4tfaHBODkcrvroL4R4vT9MsYmPyW%2F0DT7mTxhjvqam57kZl2MCSLtCP3uLRQLR9IpxVBS47LWORAHhQ7E9J578OkTWD30o%2FBMbICKq8A8kwgdhr5IrJy1sNKJD7xfBUnm%2BFrhlBrQxw%2Fu8iKS%2FxxvHLlOz%2Bo65qf15%2Fi8%3D%3C%2Fdiagram%3E%3Cdiagram%20id%3D%22L6DmhmJMZRUGYAgaX4iw%22%20name%3D%22Rooftop%20terrace%22%3E7Z1bW%2BI4GIB%2FDZfladMD7SWHccbdcdbRmVH3xifQApXSYFsE%2FPWbnpQ2H1LcpsRhvNASQknz5jvmYEvtz9efA7yYXhDb8VpIttctddBCSEGGTv%2FEJZu0xFJQWjAJXDur9Fpw7T47WaGclS5d2wkLFSNCvMhdFAtHxPedUVQow0FAVsVqY%2BIVv3WBJw5TcD3CHlt649rRNC01Uee1%2FIvjTqb5NyuGlb4zx3nl7EnCKbbJaqtI%2FdRS%2BwEhUXo1X%2FcdL%2B68vF%2Fu%2FeVc%2BnGhDWb4W0fSF39HkiSlNzvb8ZGe%2FHSmGyNZvb%2B4vRr%2BItLV5ffsI%2FIT9pbZQ104OFwGztzxozBrXLTJn9gjo5kT309pqb38KQNatd5W6RbTLNRW5kxzaLct4kvbpc0NXeLTVtluQFkn14OQLOOO7q2mbuRcL%2FAorryig5GWTaO5lz0I9txJXN1zxvRBegvixs9Ov0HvtfQBLXlygsil3LtZxblr23Ebeh4eOl4Pj2aTgCx9u088EiRNU8fJD9tFb1KgX%2BOst8ZW1mWfHTJ3omBDq2TvGmY2xjLJ6WR3WL0OQy0rmm6NQCRnhTgb%2BZOXO78iohcZpQOIGexAsqrxqshmRHvQCSrRGZIoInP6Rkjv6vqTXvZ6IOnHRFYkprDEDBlAptVAzPjr0Zb0C8X4Ej6O76SHp%2FXMASRfP1zAfBIcImBB%2BlwfQcJyPocJmFqHgE31RZecbX71LvG3m2v5OVj5S0lhcbW1Pxpxp0Y0UEViqAZim5vZ%2Bf1M7m3MpfFFNu%2Fw2VVf0hliZ8vAdyNqXGuxnLfdCcEEPz50Rz35x7%2FBqDtfS6rJfCszRnJ2X2NUlyR0s7Hxoje3BkKZc0QWkFLOh918PYldvfbYIyRYeNhvDwmZjXDo7FAcbE%2B82Zfv1baA%2BKrAYFDUGgYDyEVj1e1xucS%2FIo4AOqgAALJ3WocloCucAKisS3lcACEZY1ohIBHOvkbSdI5AFKXkgAAKUrfaeT8VoPCSCrUjGJQd2mrlhDxlpYwG0FYKpK7q0Fag4bFE01Z24IRhUmcbC41UeWJ5UVC7sXQAKnVIC0jFFM62O%2Fa9TZZDrywvnMGoCLX1fWgQFE0pJjc4otmXo4iMjo4mMrCBQfupJHFKktSS9wdGUCzFqzON%2FZ0JWetakjywE8uGNP%2BvN7n1XKeNigpCNQGbqlntjs7HrML9V%2FdobLD%2FVEjDwv1XR8oK7r8P4i7yVgyqXFQMWm589oW3teQ6puf9B3wzeSaW%2F3QZXp0%2FXJ8DycTjghlNsZvVSOdV5EZDLd1sG2pRdyOVQQSlo3TEiZD6EQhBQtQcNQugJrfzvOK2C8NJ6YHg2MSv4OCyYLkxblTcitByPMcStQpWXixieTK2OVHLeeTILIVBluNpRMhEC94inAbVDZosuV3yKjqa0lZYx0KRjbYBsOnwiqxZBdhbul4kuT7DqP7lCXCLRJPwFfa8Pgn8pNrYjV%2B8TLvJyU%2F1%2FlAOHTp6aeINCBQQ5IzWEabCTyCar7Ny%2FUTxckNAbd4%2BBgqYDuOGQBMNAY4foHHZUIUDUyGF83vJhtYcgp%2BhE%2FwzfIiXGiI5WQix3cOe68%2FS1zaOcEvtJssL0RnlhfqPm%2Bn6LrqLrq5ubxf%2FOAPlUb5PP%2FY2TmPr2TP%2BR5vQjKibGVae56%2FJ%2BBhGgS6C8nwQ3vdkSenLLcQHSB0STh3mUrcn4m7Qb1BAwQTkso4kFkzJEI3S20arWsqRCyxYzJqEpYqWFxEXliZXhMXNI68yDSeO%2FmsIi14RC7fAWhUuTqoSxrLeRUO4wDWETa7%2FEG4N4cG8%2BEvY%2B3x93eDFzPxgPgU3MqUFueAat0YjYUs07WfTi0G%2BmgqHi3TH2thdxxnNassRa0palDWfyk6ovHjr26xMnRcr4eKnQzVfgoyXbGn7ZQvMwNYhW%2BBCDdHWaUTE9ZyoWSkqT0vq%2Beqf7TkugEquKGuHItrq0XBKVsz6RM5QSrsSdBma3%2BIVGoFUFBGdOkHcOWSVAlnQaQBoabx2kSiiuXOx0%2FA13aR3TJdBK7t3FusymJw8BhAU%2BpMeqixW4NpYTq44DEs0V%2FwAWJwFSy9tDTKAfXSQF8GNlXpyE4jl0BVCYDWKQDQjJI64GOXFKAAreDEKJ1baB7ND3MCUTA54nkKjYESzOaHrz%2B7LW4x2bteqh4pZDIcgRwA8M4GX16aJluc5BhRFfd2FLQwY0UxO1biHuy%2BNSiJksaRMYLtAHftQYVKipXlig%2FNTDO%2Bg7BwAJyAYkHeg8tsRKNrC893HgtSEwCzt3AbP6WnyYBBdtAQcbwTlcEZjc6DNAhDNReYuA8XNLwZk3BsFgE4MALu92bSOLQSihSO8GSiy3i4zOLYciBZ9cGegqSUGlsxuxGuWgWjpRe66qHTIx%2FGlQLRQjz%2BBoj02jWPLgGjLJ7gTUEsEgMNGmiUgWhDdtBY6flR2eoExGxkD5xg0yQA40%2Fv3ZsD6pE3KAXgwwakZY1YMmnRJQQSnZo31Un6iSY8UBHByxrjkDhl6cwCetQdrszHdO%2Bf7xVj%2B3h1Jn3XgdK8rQns12%2BMcVuyH%2FC5u6A5zbm8fvgE2BsoWGl7MY0z8qDAsjMclyd%2BQwuTfx3RpBaQs1q9v0qtJ%2FPcChzF4JA8dO0geL70rbV5647QaM%2FQo1Kg4wJihVB5xL4flBw5tVXrUS7LVlj1nHy8jkrZ860wTZigVe383w93TWCWZh47rVqCTO%2BvY3wm2F3HC3MPR9OTwKqUQVzNMFi%2B05I8bXijdWQdeqpjGsUJHMmUTxOdmnhLnl2nl%2FAgnaGUntHPnHZzpy9f%2FT5W8t%2FVfvtRP%2FwE%3D%3C%2Fdiagram%3E%3C%2Fmxfile%3E
Very nice, @Shampra !
This viewer you’ve linked is exactly the thing what should become embedded in Anytype!
I opened the second one in Brave and I could switch on and of the layers or doing some stuff more.
I would love to have it for software documentation.
It has exactly my preferred visualization style which I earlier tedious made by hand in a special drawing program (a PCB layout program, which is not made for such things).
Never found a so easy to use software for it, without any need for registration and all the usual hassle!
And it can even do so much more …
It would be a pearl to have it in our beloved Anytype!
Eyy fellow PlantUML user 
Here are my top 3 reasons for why Anytype should support DrawIO embed for BPMN 2.0 and business process analysis:
Enable seamless BPMN 2.0 diagramming within Anytype by embedding DrawIO, allowing users to create and collaborate on industry-standard business process models alongside their documentation.
Provide a centralized platform for business process analysis by combining BPMN diagrams from DrawIO with process documentation, enhancing consistency and version control.
Meet the demands of businesses seeking comprehensive process modeling and analysis capabilities, positioning Anytype as a robust solution for process optimization and driving user adoption.
I mean, DrawIO already support sync with all major cloud storage. Supporting DrawIO embed is real deal and a step in the right direction for Anytype. Hopefully Anytype dev will consider this move genuinely.
@Razor
Are there any particular constraints that explain why this request hasn’t been carried out or it’s just lack of time (not a priority)?
It’s not something I’m looking forward to, I’d rather do something else 
.
But if so… Since there is no need for middleware or design validation, maybe I can look into it if I find the courage.
Umm, I’ve just stumbled across this topic and went to check if the embed examples actually work, but they do not. I’ve tried to make it with ChatGPT from their embed integration Github docs, but with no luck. So I’ve added a task just now with the examples, didn’t have time or priority to dig further before.
Regarding Excalidraw examples - I’ve tried to implement it 3 times but it just does not build with rspack, I do not know the reason, it just hangs and I have no option to check if the React implementation does work.
If someone would help with solving any of the above problems I will implement it.
Thank you for looking into both of them! They would be awesome additions, wish I understood enough to help lol.
Need a little more time for a few adjustments before submitting 
Oh, that’s awesome, create a PR and I will check it tomorrow and ask design team to add icon
I’ve already add an icon (scrupulously respecting the existing models), I hope it will be suitable!
Before posting my PR, I’d like to improve a few details:
By Edit button you mean some edit button shipped with the embed itself? I do not think there are any good solutions for this. Allowing the popups does not change anything since it will require the whole authorisation flow to work. You can try adding all required urls to cors.json and check if it works and add allow-popup logic in embed block, but it will take a lot of time to try. I didnt manage to make Figma auth flow work properly.
Drawio viewer add Print, Export (as image) and Edit (to open the full version of drawio), each open a new window. But not with openurl and they’ve locked the modification of their iframe (understandable) so it’s not possible to inject code.
I’ve tested allowpopup, but it opens a buggy anytype window (I could do some digging, it’s true…). At worst, the buttons will be visible but inactive, no big deal.
An Anytype button to open the url of the current iframe in a browser would be useful.
For the first point…
I’ve got a problem I’ve been working on, but in fact it must be a problem on the service side.
Pasting a non-iframe link works fine in the Desktop version (it’s transformed into a functional iframe), but the published version doesn’t display it, the iframe source is “/static/embed/iframe.html”.
This is also the case for CodePen, I’ll open a ticket later.
(demo)
I’m not sure I can do much about it.
Is this processing done elsewhere? On the heart side?
Yes, renderer processing is done in renderer repo, I think it’s private now. I will ask my collegue to implement it once it’s merged into main.
