I have a problem. I don't like using things with overlapping scope. It creates an [[Arbitrary Distinction|arbitrary]] choice when operating in the zone in the middle of the [[Venn Diagram]]. It just bothers me. > [!error] Problem > There's no obvious, best solution for creating durable, editable **graphics** to be embedded in [[Markdown]] documents There's 4[^1] approaches: 1. [[Excalidraw]] 2. [[DrawIO]] 3. [[Mermaid JS]] 4. Use *any* program, but save as static [[Durable File Types|PNGs]] that would have to be deleted & replaced if changes were needed The current thing that's bothering me is that I find [[Excalidraw]] and [[DrawIO]] **both** have a huge overlap, but also both can't *quite* cover the other's feature set entirely. Excalidraw is more of a [[Whiteboarding App]], whereas DrawIO is better at making legitimate [[Diagram Types (index)|diagrams]]. However you *can* use each to accomplish the other's specialty. ## Excalidraw ![[Excalidraw_vs_DrawIO.excalidraw-2.svg]] ==I typically default to Excalidraw,== because I can use it faster & I like the way it looks. | PROS | CONS | | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | **Speed** - I can generated diagrams in Excalidraw faster than any other option | **Less feature-filled** than DrawIO - only one diagram at a time | | **Aesthetic** - Excalidraw has a very good look, IMO | **File size** - bigger than Mermaid or plain PNGs... the [[Graphic File Size]] is worse than DrawIO too | ## DrawIO ![[drawio_vs_excalidraw.drawio.svg]] This diagram was made in DrawIO. It took me about 8x as long to create this as did the Excalidraw version above. | PROS | CONS | | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | **Features** - DrawIO can create very in-depth, multipage diagrams with links and animations | **Speed** - feature bloat has bogged down the interface. Simple things take longer to make than they do in Excalidraw. | | | **File size** - bigger than Mermaid or plain PNGs | ## Mermaid [[Mermaid JS]] **ALSO** serves the purpose of being an option for embedding graphics with [[Markdown]]. It's actually *explicitly designed* for this task. It is, however, more limited in the types of graphics it can create. Even within the graphics it can create, [[Diagrams as Code]] will always be more rigid and restricted than tools made for drawing. | PROS | CONS | | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Size** - mermaid diagrams add essentially **zero** additional megabytes to your notes/repo | **Limited in expressive scope** - cannot draw arbitrary things | | **Encapsulation** - mermaid diagrams are genuinely contained within the markdown text in which they're embedded | **Difficult to construct** - although the [[Interactive Mermaid Builder]] maybe negates this somewhat | | **Edibility** - truly the easiest to tweak in place | **Environmental requirements** - have to have [[Obsidian]] or some other tool to generate the graphic | | | **Durability** - if Mermaid changes its API, your diagram might look wrong in the future. You're dependent on the implementation used by the environment | ## Static Images You could also just forgo the idea of the image being editable. This means you can use *whatever* tool you have right now to generate the image. | PROS | CONS | | -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | | **Simplicity** - conceptually very easy. "Images are static" is a simple idea whose ramifications are obvious. | **Static** - the images are one-shot. If you want to tweak them later, it's akin to starting from scratch | | **Durability** - PNGs (and other file types) will always look the same | | | **Size** - while not at small as Mermaid, there's no overhead for saving the underlying data model | | # Markdown Graphic Tooling Flowchart ```mermaid --- config: theme: redux --- flowchart TD n3["well-constrained type of diagram?"] -- yes --> n4["okay with automated layouts?"] n4 -- yes --> n5["Use Mermaid"] n2@{ label: "need for a graphic<br style=\"--tw-scale-x:\">in a markdown document" } --> n6["okay with static files?"] n6 -- no --> n3 n6 -- yes --> n7["Use any tool that creates PNGs"] n3 -- no --> n8["need more than one page?"] n4 -- no --> n9["Use DrawIO"] n8 -- yes --> n9 n8 -- no --> n10["Use Excalidraw"] n3@{ shape: decision} n4@{ shape: decision} n5@{ shape: terminal} n2@{ shape: terminal} n6@{ shape: decision} n7@{ shape: terminal} n8@{ shape: decision} n9@{ shape: terminal} n10@{ shape: terminal} ``` **** # More ## Source - Self [^1]: Clearly there are more than 4; but things like "TL Draw" aren't meaningfully different options from what's on this list.