Mermaid

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.

Marp, the Markdown Presentation Ecosystem, is an open-source toolset for creating slide decks from Markdown. Its format is based on CommonMark, with horizontal rules separating slides, plus directives and extended syntax for images, mathematical typesetting, auto-scaling, and theming. The ecosystem includes Marp Core, Marp CLI, and a VS Code extension; it can export decks to HTML, PDF, and PowerPoint through Google Chrome or Chromium. Marp is built on the pluggable Marpit framework, and the official tools and related libraries 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.

GitDiagram is a web application that turns public or private GitHub repositories into interactive architecture diagrams with links back to the source files and directories. It retrieves a repository's default branch, tree, README, and bounded, integrity-checked source excerpts through the GitHub API; an OpenAI or OpenRouter model produces a source-grounded overview and graph, whose groups, nodes, edges, shapes, labels, and paths are validated against the repository. A deterministic compiler converts the validated graph to Mermaid, while the browser sanitizes and renders the result and can export Mermaid source or a PNG. Successful diagrams are persisted for later reopening, and private-repository access uses a GitHub token supplied for the relevant request rather than embedding the token in public links.

reladraw is a text language and command-line tool for creating diagrams with relative positioning. It sits between automatic layout systems such as Mermaid, Graphviz, and D2 and manually positioned editors such as draw.io: users declare nodes, relationships, labels, and relative placement without specifying absolute coordinates. The parser and layout engine resolve the declarations into a diagram, while the tool reports issues such as overlaps, crossed edges, and text overflow without requiring a rendered preview. Its TypeScript CLI converts `.reladraw` files to SVG, and the repository also provides a browser version and an optional agent skill. The project is early-stage, its syntax is subject to change, and the code is licensed under Apache-2.0.