thehardwarestore.ai

Visual-explainer is an agent skill that transforms complex technical output into polished, self-contained HTML pages. It serves as a plugin for AI coding agents (Claude Code, Pi, Cursor, Antigravity, Codex, OpenCode, MCP hosts) to generate diagrams, diff reviews, plan reviews, slide decks, narrated videos, and data tables instead of ASCII art. The architecture is modular: a core skill definition (`SKILL.md`) provides workflow and design rules, while separate subsystems handle plan rendering (`plan/render.mjs`), quick-mode JSON-to-HTML conversion (`quick/render.mjs`), a local stdio MCP server (`mcp/server.mjs`), a best-effort PPTX exporter (`pptx/export.mjs`), and a Playwright-based video renderer (`video/render.mjs`). The Pi agent integration includes a native TypeScript extension (`extension.ts`) with `prepare`, `render`, and `render_quick` actions. The codebase demonstrates high craftsmanship with thorough input validation, security-conscious file handling (symlink rejection, atomic writes, output jail), clear error messages, and extensive documentation. The plan renderer is particularly notable as a zero-dependency HTML generator that validates plan structure, reads cited code from disk, and produces interactive pages with decision trees, comments, and keyboard navigation. The quick renderer validates JSON specs against a JSON Schema and produces complete HTML. The MCP server follows the Model Context Protocol strictly and exposes tools, prompts, and resources without calling an LLM or starting an HTTP listener. The video renderer uses Playwright to drive a virtual clock, ensuring frame-perfect timing. The repository is actively maintained with recent commits, a detailed changelog, and version consistency checks across all metadata files.

Mermaid is a mature, browser-oriented TypeScript monorepo that renders Markdown-like text definitions into SVG diagrams. In production it supports over 20 diagram families (flowchart, sequence, class, state, gantt, mindmap, pie, git, ER, C4, sankey, block, agentflow, and more), with a pipeline that detects diagram type from text, lazily loads a parser, builds a diagram-specific data model, and renders through a shared rendering-util layer. Parsing is split across Langium, Chevrotain, and legacy JISON grammars; layout is provided by dagre, ELK, a custom swimlane/orthogonal router, and tidy-tree plugins. The public API (initialize/run/parse/registerExternalDiagrams) makes this a plugin-extensible library rather than a standalone application, though it also ships a local editor, dev-explorer, and extensive e2e tooling. The codebase shows high engineering craft: CI is extensive with Vitest, Playwright visual regression, code coverage, security scanning, dependency automation, and changesets for versioning. Accessibility, XSS sanitization, and config validation are treated as first-class concerns. The theme system is particularly well-structured, managing multiple looks and color palettes through a centralized color-theme gate. The primary weaknesses are scale-driven: mixed parser ecosystems, a very large config surface, many beta diagram types, and highly intricate layout code that is expensive to change. It is neither a data-research repository nor a service; its research-like components are the layout algorithms and geometry validation, which remain embedded in a library architecture.

Excalidraw is an open-source virtual whiteboard and diagramming application, published both as a hosted PWA (excalidraw-app) and as an npm library (@excalidraw/excalidraw). The system provides an infinite canvas with hand-drawn-style rendering, supporting a wide range of shapes (rectangles, ellipses, arrows, lines, freedraw, text, sticky notes, images, frames, embeddables) and tools (laser pointer, eraser, bucket fill, lasso selection, shape recognition). It features real-time collaboration via WebSocket (socket.io) and Firebase, with end-to-end encryption, cursor sharing, and follow/unfollow. The architecture is a React-based single-page application with a modular monorepo structure: the core editor logic resides in packages/excalidraw, element manipulation in packages/element, geometry utilities in packages/math, shared constants and data structures in packages/common, and export helpers in packages/utils. State management uses Jotai atoms and a custom action registration system (ActionManager). The editor renders to an HTML5 canvas with a separate SVG overlay for interactive elements. Key entry points include packages/excalidraw/index.tsx (library export) and excalidraw-app/index.tsx (hosted app bootstrap). Data flows from user interactions through actions to element mutations, scene updates, and canvas re-rendering. External dependencies include Firebase (Firestore, Storage), socket.io, Radix UI, Jotai, roughjs, and various build tools. The codebase also includes an AI-assisted text-to-diagram feature (TTD dialog) that converts Mermaid syntax into Excalidraw elements via streaming SSE and auto-fix logic.

D2 is a declarative diagramming language and compiler implemented in Go. It parses a textual DSL, compiles to an intermediate representation, applies automatic layout via multiple engines (Dagre, ELK, and the custom TALA engine), and renders to SVG, PNG, PDF, PPTX, ASCII art, and animated GIF. The architecture is a pipeline: parser (d2parser) → compiler (d2compiler/d2ir) → graph (d2graph) → layout (d2layouts) → renderer (d2renderers). It also includes a language server (d2lsp) for IDE integration and JavaScript/WASM bindings for browser and Node.js usage. The codebase is production-grade with extensive testing, resource safety patterns (work guards, budgets, transactions), security hardening (SVG escaping, network policy), and a CI/CD release pipeline. External dependencies include Go modules for layout algorithms, bundled fonts, and Noto Color Emoji. The system is primarily a CLI tool and Go library, with a secondary JavaScript API.

This repository is a production-grade Agent Skill and CLI tool for generating geometry-safe technical diagrams from structured JSON or natural language descriptions. It produces SVG, PNG, animated GIF, and offline interactive HTML outputs across 12 visual styles (11 generator-driven, 1 AI-authored) and supports 14 UML diagram types with domain-specific semantic contracts for C4, cloud, event, and ops profiles. The system features a deterministic orthogonal routing engine, composition quality gates, a validated SVG-to-GIF motion pipeline with per-style animation contracts, and a strict validation framework. It is distributed as an npm package and a Claude Code skill, with a nested mirror for `npx skills add` installation. The codebase is well-tested with extensive regression and pixel-level gates, though it suffers from some duplication between the root and skill mirror directories and hardcoded contract constants.

mermaid-cli is a command-line interface for generating diagrams from Mermaid syntax. It processes input files (.mmd, .md, .markdown) containing Mermaid diagram definitions and outputs SVG, PNG, or PDF files. The architecture centers around a Puppeteer-driven rendering pipeline that launches a headless browser to render Mermaid diagrams via the Mermaid library. Key features include Markdown diagram extraction, configurable theming, CSS injection, icon pack support, and programmable Node.js API. The CLI entry point is src/cli.js, which delegates to the run() and renderMermaid() functions in src/index.js for core functionality. External dependencies include Puppeteer, Mermaid, and various layout engines (ELK, tidy-tree).

JSON Crack is an open-source, browser-based tool for visualizing, formatting, converting, and exploring JSON, YAML, CSV, and XML data as interactive graphs. The monorepo (Turborepo) contains four workspaces: a Next.js web app (apps/www) that provides the full editor experience with a Monaco-based text editor, split-view layout, graph canvas, and various utility modals (jq, JSONPath, schema validation, code generation); a VS Code extension (apps/vscode) that embeds the same graph view as a webview panel; a Chrome extension (apps/chrome-extension) that injects a 'Raw'/'Graph' toggle on any JSON page; and a reusable React component package (packages/jsoncrack-react) that exposes `JSONCrack` as a standalone component along with a `parseGraph` utility and TypeScript types. All data processing happens client-side — the app is a fully static Next.js export served behind NGINX. The architecture is frontend-only, relying on Zustand for state, reaflow for graph layout, react-zoomable-ui for pannable/zoomable canvas, and jsonc-parser for AST-driven parsing. The codebase is well-organized, with clear separation of concerns, good TypeScript coverage, and unit tests in the core package.

This repository implements an AI-powered diagram generation and editing application that integrates draw.io with large language models. Users describe diagrams in natural language, and the system generates, edits, and validates draw.io XML diagrams through a chat interface. The architecture is a Next.js 16 web application with App Router, supporting multiple AI providers (OpenAI, Anthropic, Google, AWS Bedrock, DeepSeek, Ollama, etc.) via the Vercel AI SDK. It includes a desktop Electron app with offline draw.io support, an MCP server for external AI agent integration (Claude, Cursor, VS Code), and an admin panel for runtime configuration of models, access controls, and observability (Langfuse). The application is self-hostable via Docker and deployable to Vercel or Cloudflare Workers. The core workflow involves a chat interface where users send prompts, optionally upload files (images, PDF, text) or URLs, and the AI responds with tool calls to display, edit, or append diagrams. The system handles streaming XML generation, debounced diagram updates, and automatic XML validation/fixing to correct common LLM output issues. It supports multi-page diagrams, shape libraries (AWS, Azure, GCP, etc.), and experimental VLM-based diagram validation. Session history, templates, and diagram versions are persisted in IndexedDB, with optional server-side quota management via DynamoDB. The codebase demonstrates strong engineering practices with comprehensive unit and E2E tests, CI/CD pipelines, multi-platform builds (web, desktop, MCP server), and i18n support for English, Chinese, and Japanese. It features reusable patterns such as a registry-driven admin settings system, DNS-based SSRF protection, and a standalone XML validation library. While the project is actively maintained and uses modern frameworks, its large dependency surface and complex configuration precedence (env vars, admin panel, file-based) introduce some maintenance overhead.

MarkText is a cross-platform desktop markdown editor (Electron + Vue 3) powered by the Muya WYSIWYG engine. It provides real-time rendering of CommonMark, GFM, and extended syntax including KaTeX math, mermaid/plantuml diagrams, footnotes, tables, task lists, and 30+ themes. The monorepo contains four packages: `desktop` (Electron shell with IPC, preferences, spellcheck, export), `muya` (TypeScript core editor with block-based state, snabbdom rendering, undo/redo via ot-json1, clipboard, and floating UI components), `muyajs` (legacy JavaScript engine, still present for partial feature parity), and `website` (Next.js documentation site). The architecture follows a block tree pattern where each block type (paragraph, heading, list, table, etc.) is a subclass with consistent parent/content interfaces. Communication between the Electron main and renderer processes uses typed IPC channels. The codebase demonstrates strong software engineering practices with extensive unit and e2e test coverage (Playwright, Vitest), reproducible builds (pnpm monorepo), and a focus on regression testing for edge cases. However, the ongoing migration from the legacy `muyajs` engine to the new `muya` engine introduces some code duplication and technical drift, and some modules retain prototype-style JavaScript alongside modern TypeScript classes.

This is a VS Code extension that provides an enhanced markdown preview with live updates, scroll sync, diagram rendering (Mermaid, PlantUML, Vega, etc.), math typesetting (KaTeX/MathJax), wikilinks, backlinks, graph view, AI translation, and multiple export formats (HTML, PDF, Pandoc, etc.). The architecture is a monolithic extension with a central PreviewProvider class managing webview panels, backed by the crossnote library for markdown processing. It registers over 30 commands and multiple VS Code providers (hover, completion, document link, custom editor, graph view). The codebase is well-structured with TypeScript, has CI/CD pipelines, and demonstrates good engineering practices such as mutex-based singletons, request sequencing, and CSP generation. However, the PreviewProvider class is large (~1200 lines) and handles many responsibilities, indicating potential for modularization. The extension is actively maintained with frequent releases and security fixes.