excalidraw

Pros of draw.io

• More feature-rich with advanced diagramming capabilities
• Supports a wider range of diagram types (flowcharts, UML, network diagrams, etc.)
• Offers both web-based and desktop applications

Cons of draw.io

• Steeper learning curve due to more complex interface
• Heavier and potentially slower performance, especially for large diagrams
• Less focus on collaborative, real-time editing

Code Comparison

draw.io (XML-based format):

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="Hello" style="rounded=1;" vertex="1" parent="1">
      <mxGeometry x="120" y="120" width="80" height="40" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

Excalidraw (JSON-based format):

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "type": "rectangle",
      "version": 1,
      "versionNonce": 1,
      "isDeleted": false,
      "id": "1",
      "fillStyle": "hachure",
      "strokeWidth": 1,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "angle": 0,
      "x": 100,
      "y": 100,
      "strokeColor": "#000000",
      "backgroundColor": "transparent",
      "width": 100,
      "height": 100,
      "seed": 1,
      "groupIds": [],
      "strokeSharpness": "sharp",
      "boundElements": [],
      "updated": 1,
      "link": null,
      "locked": false
    }
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": null
  }
}

Pros of tldraw

• More extensive feature set, including advanced shape tools and collaborative editing
• Cleaner and more modern user interface
• Better performance with large, complex drawings

Cons of tldraw

• Steeper learning curve due to more complex features
• Less focus on simplicity and quick sketches
• Requires more system resources

Code Comparison

tldraw:

import { TLDraw, useFileSystem } from '@tldraw/tldraw'

export default function App() {
  const fileSystemEvents = useFileSystem()
  return <TLDraw {...fileSystemEvents} />
}

Excalidraw:

import { Excalidraw } from "@excalidraw/excalidraw";

export default function App() {
  return <Excalidraw />;
}

Both projects are open-source drawing tools, but they cater to slightly different use cases. Excalidraw focuses on simplicity and ease of use for quick sketches and diagrams, while tldraw offers a more comprehensive set of features for complex drawings and collaborative work. The code comparison shows that tldraw requires additional setup for file system integration, while Excalidraw can be implemented with minimal configuration. Ultimately, the choice between the two depends on the specific needs of the project and the desired balance between simplicity and advanced features.

Pros of yjs

• More versatile, supporting various data types and use cases beyond drawing
• Offers real-time collaboration features out-of-the-box
• Provides a framework for building custom collaborative applications

Cons of yjs

• Steeper learning curve due to its more general-purpose nature
• Requires additional setup and integration for specific use cases
• Less focused on drawing and whiteboarding functionality

Code Comparison

Excalidraw (React component usage):

import { Excalidraw } from "@excalidraw/excalidraw";

<Excalidraw
  initialData={initialData}
  onChange={(elements, state) => console.log("Elements :", elements, "State : ", state)}
/>

yjs (Basic usage):

import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'

const ydoc = new Y.Doc()
const provider = new WebsocketProvider('ws://localhost:1234', 'my-roomname', ydoc)
const yarray = ydoc.getArray('my-array')

While Excalidraw provides a ready-to-use drawing component, yjs offers a more flexible foundation for building collaborative applications. Excalidraw is ideal for quick implementation of drawing features, while yjs is better suited for complex, custom collaborative solutions across various data types.

Pros of Mermaid

• Text-based diagram creation, easier for version control
• Supports a wide variety of diagram types (flowcharts, sequence diagrams, Gantt charts, etc.)
• Can be integrated directly into Markdown documents

Cons of Mermaid

• Less intuitive for non-technical users
• Limited customization options for diagram aesthetics
• Steeper learning curve for complex diagrams

Code Comparison

Mermaid:

graph TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    B -->|No| D[End]

Excalidraw:

const elements = [
  { type: "rectangle", x: 100, y: 100, width: 100, height: 50, text: "Start" },
  { type: "diamond", x: 200, y: 200, width: 100, height: 100, text: "Is it?" }
];

Mermaid uses a declarative syntax to define diagrams, while Excalidraw relies on JavaScript objects to represent elements. Mermaid's approach is more concise for simple diagrams, but Excalidraw offers more fine-grained control over element properties and positioning.

Pros of Rough

• Lightweight and focused on creating hand-drawn style graphics
• Can be used with various rendering contexts (Canvas, SVG, etc.)
• Easier to integrate into existing projects as a standalone library

Cons of Rough

• Limited to creating basic shapes and lines
• Lacks advanced features like real-time collaboration
• No built-in user interface or drawing tools

Code Comparison

Rough:

const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 200, { fill: 'red' });
rc.circle(50, 50, 80, { stroke: 'blue', strokeWidth: 2 });

Excalidraw:

const excalidrawAPI = await Excalidraw.getSceneElementsIncludingDeleted();
const rectangle = {
  type: 'rectangle',
  x: 10,
  y: 10,
  width: 200,
  height: 200,
  backgroundColor: 'red'
};
excalidrawAPI.addElements([rectangle]);

Rough focuses on creating individual hand-drawn style elements, while Excalidraw provides a complete drawing application with more advanced features and a user interface. Rough is better suited for adding sketchy graphics to existing projects, whereas Excalidraw is ideal for creating standalone drawings and diagrams with collaboration features.

Pros of Perfect-freehand

• Focused specifically on freehand drawing algorithms
• Lightweight and can be easily integrated into other projects
• Provides more control over stroke properties and smoothing

Cons of Perfect-freehand

• Limited to freehand drawing functionality
• Lacks built-in UI components and additional features
• Smaller community and fewer contributions

Code Comparison

Perfect-freehand:

import { getStroke } from "perfect-freehand"

const points = [[0, 0], [10, 5], [20, 8]]
const stroke = getStroke(points, {
  size: 8,
  thinning: 0.5,
  smoothing: 0.5,
  streamline: 0.5,
})

Excalidraw:

import { exportToCanvas } from "@excalidraw/excalidraw"

const elements = [
  { type: "freedraw", points: [[0, 0], [10, 5], [20, 8]] },
]
const canvas = await exportToCanvas({
  elements,
  appState: { viewBackgroundColor: "#ffffff" },
})

Perfect-freehand focuses on generating smooth freehand strokes, while Excalidraw provides a complete drawing application with various tools and export options. Perfect-freehand is more suitable for developers looking to implement custom freehand drawing functionality, whereas Excalidraw offers a full-featured drawing solution out of the box.