[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-80354":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":14,"stars7d":14,"stars30d":14,"stars90d":15,"forks30d":15,"starsTrendScore":13,"compositeScore":16,"rankGlobal":10,"rankLanguage":10,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":15,"starSnapshotCount":15,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},80354,"pi-k-excalidraw","kostyay\u002Fpi-k-excalidraw","kostyay","Native Excalidraw diagram preview tool for pi — draw and save diagrams from the agent with a live glimpse webview.","https:\u002F\u002Fgithub.com\u002Fkostyay\u002Fpi-k-excalidraw",null,"TypeScript",63,3,1,0,44.41,"MIT License",false,"main",true,[22,23,24,25,26],"coding-agent","diagram","excalidraw","pi-extension","pi-package","2026-06-12 04:01:27","\u003Cdiv align=\"center\">\n\n# pi-k-excalidraw\n\n### Native Excalidraw diagram preview tool for [pi](https:\u002F\u002Fpi.dev\u002F)\n\n**[Install](#install)** · **[Usage](#usage)** · **[How it works](#how-it-works)**\n\n\u003Cimg src=\"media\u002Fdemo.gif\" alt=\"pi-k-excalidraw demo — \u002Fexcalidraw driving a live preview\" width=\"720\" \u002F>\n\n*≈ 19 s walkthrough of `\u002Fexcalidraw` driving a live preview.*\n\n\u003C\u002Fdiv>\n\n*Let pi draw Excalidraw diagrams that preview live in a glimpse window — no\nMCP child process, no extra services.*\n\nAn extension for **[pi](https:\u002F\u002Fpi.dev\u002F)** — an AI coding agent that runs in\nyour terminal. `pi-k-excalidraw` registers tools so the model can draw and\nsave Excalidraw diagrams. Inspired by\n[`excalidraw-mcp`](https:\u002F\u002Fgithub.com\u002Fexcalidraw\u002Fexcalidraw-mcp), but\nreimplemented natively against the pi extension API.\n\n---\n\n## Install\n\n```bash\n# latest from main\npi install git:github.com\u002Fkostyay\u002Fpi-k-excalidraw\n\n# pin to a release\npi install git:github.com\u002Fkostyay\u002Fpi-k-excalidraw@v0.1.0\n\n# try without installing\npi -e git:github.com\u002Fkostyay\u002Fpi-k-excalidraw\n```\n\nPi clones the repo, runs `npm install`, and registers the extension. Use\n`-l` to install into the current project (`.pi\u002Fsettings.json`) instead of\nglobally.\n\n\u003Cdetails>\n\u003Csummary>Manual install\u003C\u002Fsummary>\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fkostyay\u002Fpi-k-excalidraw.git\ncd pi-k-excalidraw\nnpm install            # pulls in glimpseui, the webview host\ncp -r extensions\u002Fpi-k-excalidraw ~\u002F.pi\u002Fagent\u002Fextensions\u002F\n```\n\nThen `\u002Freload` in pi.\n\n\u003C\u002Fdetails>\n\n---\n\n## What's included\n\n### Tools\n\n| Tool | Description |\n|------|-------------|\n| `draw_diagram` | Render an array of Excalidraw elements in a glimpse preview window. Streams partial JSON so long diagrams update incrementally. |\n| `draw_mermaid_diagram` | Convert a Mermaid diagram (flowchart, sequence, class, ER) into native Excalidraw elements and render in the same preview. |\n| `screenshot_diagram` | Capture the current preview as a PNG and return it as image content so the model can visually inspect and self-correct. |\n| `save_diagram` | Write the current diagram to a `.excalidraw` file. Pass `name` to save under `.pi\u002Fexcalidraw-diagrams\u002F`, or `path` for a custom location. |\n| `list_diagrams` | List previously saved diagrams under `.pi\u002Fexcalidraw-diagrams\u002F`. |\n| `load_diagram` | Load a saved `.excalidraw` file back into the preview as a new checkpoint so you can extend it with more `draw_diagram` calls. |\n\n### Command\n\n| Command | Description |\n|---------|-------------|\n| `\u002Fexcalidraw \u003Cdescription>` | Kick off a drawing turn. The Excalidraw element-format cheat sheet is injected into the system prompt for the rest of the session, so the model never has to ask for it. After every drawing turn pi prompts you to send the screenshot back to the LLM with optional comments for another refinement pass — decline to exit the loop. |\n\n### Clipboard export\n\nThe preview window includes PNG and SVG copy actions. PNG copy uses native\n`osascript` on macOS so the image lands on the system clipboard, not just the\nbrowser one.\n\n---\n\n## Usage\n\n```\n\u002Fexcalidraw a sequence diagram of the OAuth 2.0 authorization-code flow\n```\n\nThe model returns a `draw_diagram` call with an array of Excalidraw elements.\nThe preview window opens (or updates in place) and renders them. Iterate by\nasking pi to extend or fix the diagram — the extension passes a checkpoint\nid back so the next call extends the same canvas instead of replacing it.\n\nWhen you're happy:\n\n```\nsave it as oauth-flow\n```\n\n`save_diagram` writes the canonical `.excalidraw` JSON to\n`.pi\u002Fexcalidraw-diagrams\u002Foauth-flow.excalidraw` (or a custom `path` if you\nprefer), ready to open in [excalidraw.com](https:\u002F\u002Fexcalidraw.com) or any\nExcalidraw editor.\n\nResume later:\n\n```\nlist saved diagrams, then load oauth-flow and add a refresh-token step\n```\n\n`load_diagram` restores the file as a fresh checkpoint; the next\n`draw_diagram` call extends it via `restoreCheckpoint`.\n\nVisual self-check (sends a screenshot back to the model so it can see what\nit drew):\n\n```\ntake a screenshot and check if the labels overlap\n```\n\nThe model is also prompted (via `draw-instruction.md`) to call\n`screenshot_diagram` itself after each draw and self-correct overlaps,\ntruncated text, low-contrast labels, off-camera elements, and misaimed\narrows before reporting back.\n\nReview loop: after every turn started by `\u002Fexcalidraw`, pi opens a confirm\ndialog asking whether to send the current screenshot back to the LLM. Accept\nto enter free-form comments (or leave them empty for a generic review pass);\nthe screenshot + comments are forwarded as a new user message that extends\nthe latest checkpoint. Decline to leave the loop.\n\nMermaid shortcut:\n\n```\ndraw the OAuth flow as a mermaid sequence diagram\n```\n\n---\n\n## How it works\n\n```\n┌──────────────────────┐     ┌──────────────────────────┐\n│  pi extension        │     │  Glimpse webview          │\n│                      │     │                           │\n│  draw_diagram        ├────►│  @excalidraw\u002Fexcalidraw   │\n│  save_diagram        │     │  (loaded from esm.sh)     │\n│  \u002Fexcalidraw cmd     │     │  PNG\u002FSVG clipboard export │\n└──────────────────────┘     └──────────────────────────┘\n```\n\n- Prompts live as standalone markdown files under\n  `extensions\u002Fpi-k-excalidraw\u002Fprompts\u002F` (`element-format.md` cheat sheet,\n  `draw-instruction.md` for `\u002Fexcalidraw` turns, `review-instruction.md` for\n  the post-turn review loop) and are loaded from disk at module init — edit\n  in place, just restart pi.\n- Streaming partial JSON is parsed by `parser.ts` so long diagrams render\n  element-by-element instead of waiting for the full payload (throttled to\n  ~80 ms between webview pushes).\n- Checkpoints let successive `draw_diagram` calls extend the previous canvas\n  rather than replacing it; pass `{ \"type\": \"restoreCheckpoint\", \"id\": \"\u003Cid>\" }`\n  as the first element. Use `{ \"type\": \"delete\", \"ids\": \"id1,id2\" }` to\n  remove specific elements before re-adding them.\n- `screenshot_diagram` runs an RPC into the webview, exports the canvas as\n  PNG, and returns it as image content so the model can visually inspect its\n  own work and self-correct.\n- Mermaid diagrams (`flowchart`, `sequence`, `class`, `ER`) are converted to\n  native Excalidraw elements inside the webview via\n  `@excalidraw\u002Fmermaid-to-excalidraw`; other Mermaid types fall back to\n  rendered images.\n\n---\n\n## Development\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fkostyay\u002Fpi-k-excalidraw.git\ncd pi-k-excalidraw\nnpm install\nnpm run typecheck\nnpm test\n```\n\nThen load the extension directly from your checkout:\n\n```bash\npi -e .\u002Fextensions\u002Fpi-k-excalidraw\u002Findex.ts\n```\n\n---\n\n## Credits\n\n- [Excalidraw](https:\u002F\u002Fgithub.com\u002Fexcalidraw\u002Fexcalidraw) — the canvas itself.\n- [excalidraw-mcp](https:\u002F\u002Fgithub.com\u002Fexcalidraw\u002Fexcalidraw-mcp) — the\n  element-format cheat sheet and drawing-instruction prompts originate here\n  (MIT-licensed).\n- [pi](https:\u002F\u002Fpi.dev\u002F) — the agent harness that hosts this extension.\n\n## License\n\nMIT — see [LICENSE](LICENSE).\n","pi-k-excalidraw 是一个为 pi 编程助手设计的原生 Excalidraw 图表预览工具，允许用户通过终端绘制并保存图表，并实时预览。该项目利用 TypeScript 开发，主要功能包括直接在终端内绘制、编辑和保存 Excalidraw 图表，支持 Mermaid 语法转换及截图保存等。特别之处在于其无需额外服务或子进程即可实现即时预览，非常适合需要快速创建流程图、架构图或其他类型图表的开发者使用。此外，该扩展还提供了丰富的命令行接口，便于自动化工作流集成。",2,"2026-06-11 04:00:27","CREATED_QUERY"]