reladraw

Excalidraw is an open-source virtual whiteboard for creating hand-drawn-style diagrams, wireframes, and other canvas-based drawings. It provides tools for shapes, arrows, lines, freehand drawing, image insertion, labeled and bound arrows, zooming, panning, undo and redo, dark mode, shape libraries, localization, and export to PNG, SVG, clipboard, or its open JSON format. The editor is available as an npm package for integration into applications. The hosted Excalidraw.com app adds real-time collaboration, end-to-end encryption, browser autosave with local-first behavior, offline PWA support, and shareable read-only links. The videos describe using Excalidraw to visualize Mermaid-generated diagrams and to manually map multi-step AI workflows with jobs, arrows, parallel lanes, checks, and human approvals.

tldraw is an open-source SDK for building infinite-canvas applications in React, including whiteboards, diagramming tools, and workflow-mapping interfaces. Its canvas engine supports custom shapes, tools, bindings, UI components, drawing, geometric shapes, rich text, arrows, snapping, media, image export, and runtime control through an Editor API. The repository also documents self-hosted real-time collaboration through @tldraw/sync, browser-based rendering, and canvas primitives for AI integrations. It can be installed as an npm package and includes starter kits for applications such as workflow builders, agent canvases, and AI chat interfaces. The starter kits are MIT-licensed.

Diagram Design is a diagram-generation skill for Claude Code, Codex, Factory Droid, and Pi. It produces self-contained HTML and SVG diagrams through 39 editorial visual types, including architecture, flowchart, sequence, state-machine, data-flow, timeline, Sankey, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, and database-schema diagrams. It can read a website to match its brand, and can redraw draw.io or Mermaid sources at a selected format, size, and detail level. Its semantic system patterns describe behavior separately from layout, so queues, policy traces, and trust boundaries can use an existing diagram type without adding new layout types. The repository supplies each type in minimal-light, minimal-dark, and full-editorial variants. Static HTML is the default; optional accessible motion is available for ordered explanations. The diagrams require no build step, JavaScript, or external image dependency.

Drawesome is a drawing toolbar and canvas component for React applications. It provides seven pen types—pencil, pen, brush, fineliner, highlighter, fountain pen, and another configurable pen tool—that vary stroke width according to movement speed or direction, plus an eraser that removes areas of strokes rather than deleting whole strokes. The React component supports configurable tools, colors, sizes, opacity, toolbar placement, appearance, controls, themes, tooltips, keyboard shortcuts, and initial or externally managed strokes. Drawings can be exported as SVG or PNG, downloaded directly, or accessed as stroke data through its ref methods. It is installed with npm, requires React 18 or later as a peer dependency, and has no runtime dependency beyond React.

Quickdraw is an MIT-licensed, open-source infinite-canvas whiteboard SDK for React, React Native/Expo, and plain JavaScript applications. It provides freehand pressure ink, highlighters, shapes, arrows, lines, text, sticky notes, images, selection and transformation tools, laser presentation pointers, themes, grids, palm rejection, and PNG export. Its data model emits JSON-safe diffs for real-time synchronization over an application-chosen transport, with support for persistence, undo/redo, and stroke-by-stroke replay. The project provides separate core, React, and React Native packages; the core is plain ESM with zero runtime dependencies and can run in modern browsers without a build step. The repository states that it is free for commercial use and has no license fee.