diff --git a/backlog/tasks/fl-73 - The-head-of-every-page.md b/backlog/tasks/fl-73 - The-head-of-every-page.md index a5ac9ef..d1e743b 100644 --- a/backlog/tasks/fl-73 - The-head-of-every-page.md +++ b/backlog/tasks/fl-73 - The-head-of-every-page.md @@ -58,7 +58,7 @@ author: @pi created: 2026-09-25 17:56 --- -AC#6: Lighthouse SEO 100 verified locally (JSON report); the tags are the documented set Slack/X/LinkedIn/Discord read (og:title, og:description, og:image 1200x630 PNG, twitter:card summary_large_image). The live unfurl in each app needs the deployed URL and an account post — the owner's to confirm after deploy. +AC#6: Lighthouse SEO 100 verified locally (JSON report); the tags are the documented set Slack/X/LinkedIn/Discord read (og:title, og:description, og:image 1200x630 PNG, twitter:card summary_large_image). The live unfurl in each app needs the deployed URL and an account post: the owner's to confirm after deploy. --- diff --git a/backlog/tasks/fl-74 - A-landing-page-and-the-editor-at-new.md b/backlog/tasks/fl-74 - A-landing-page-and-the-editor-at-new.md index cd71332..459e9bd 100644 --- a/backlog/tasks/fl-74 - A-landing-page-and-the-editor-at-new.md +++ b/backlog/tasks/fl-74 - A-landing-page-and-the-editor-at-new.md @@ -39,7 +39,7 @@ Today `/` redirects straight into the client-rendered editor, so there is nothin -1. Router: the editor's canonical path becomes /new with /flow as its alias (old links and #flow= share links unchanged), / redirects to it as the SPA fallback. 2. landing.template.html + scripts/make-landing.mjs (npm run landing) generate public/landing.html: the loop one-liner, the static diagram SVG, an iframe of the real editor seeded with the architecture example (live canvas), the brief with a Copy button, and the MCP setup lines; a Vite middleware serves it at / in dev and preview. 3. scripts/make-demo-clip.mjs (npm run clip) records the real app — sketch, Copy for AI, Claude building — as public/demo.webm for the landing. 4. vercel.json rewrites only /new and /flow (+children) to the SPA; / to the landing; nginx likewise. 5. sitemap gains /new. 6. e2e/landing.spec.js covers the landing content and that /flow, /new and a share-hash link all open the editor. +1. Router: the editor's canonical path becomes /new with /flow as its alias (old links and #flow= share links unchanged), / redirects to it as the SPA fallback. 2. landing.template.html + scripts/make-landing.mjs (npm run landing) generate public/landing.html: the loop one-liner, the static diagram SVG, an iframe of the real editor seeded with the architecture example (live canvas), the brief with a Copy button, and the MCP setup lines; a Vite middleware serves it at / in dev and preview. 3. scripts/make-demo-clip.mjs (npm run clip) records the real app (sketch, Copy for AI, Claude building) as public/demo.webm for the landing. 4. vercel.json rewrites only /new and /flow (+children) to the SPA; / to the landing; nginx likewise. 5. sitemap gains /new. 6. e2e/landing.spec.js covers the landing content and that /flow, /new and a share-hash link all open the editor. diff --git a/backlog/tasks/fl-75 - Every-shared-diagram-is-its-own-preview.md b/backlog/tasks/fl-75 - Every-shared-diagram-is-its-own-preview.md index 5f70915..10e8ec2 100644 --- a/backlog/tasks/fl-75 - Every-shared-diagram-is-its-own-preview.md +++ b/backlog/tasks/fl-75 - Every-shared-diagram-is-its-own-preview.md @@ -38,7 +38,7 @@ Hosted links (`server/src/diagrams/page.ts`) have one generic description and no -server/src/diagrams/preview.ts composes a 1200x630 brand canvas with the diagram's own renderSvg output nested (viewBox-parsed, letterboxed) and its title, rasterised with @resvg/resvg-js (DejaVu Sans as the text font — apk font-dejavu added to the server image; letterforms differ from the browser, layout never does). Route GET /d/:id/og.png serves it with ETag id-revision and Cache-Control immutable (one image per revision). renderPage now sets og:title (title · isketch), og:description (the brief's first line), og:image/og:image:alt, twitter:card summary_large_image with twitter:title/description/image, plus canonical and og:url. Verified: 13 server tests against PostgreSQL, including PNG magic bytes and 1200x630 dimensions, tag presence, and a revision bump changing the ETag. +server/src/diagrams/preview.ts composes a 1200x630 brand canvas with the diagram's own renderSvg output nested (viewBox-parsed, letterboxed) and its title, rasterised with @resvg/resvg-js (DejaVu Sans as the text font; apk font-dejavu added to the server image; letterforms differ from the browser, layout never does). Route GET /d/:id/og.png serves it with ETag id-revision and Cache-Control immutable (one image per revision). renderPage now sets og:title (title · isketch), og:description (the brief's first line), og:image/og:image:alt, twitter:card summary_large_image with twitter:title/description/image, plus canonical and og:url. Verified: 13 server tests against PostgreSQL, including PNG magic bytes and 1200x630 dimensions, tag presence, and a revision bump changing the ETag. ## Final Summary diff --git a/backlog/tasks/fl-76 - Written-for-AI-readers.md b/backlog/tasks/fl-76 - Written-for-AI-readers.md index f60dd2a..635dfda 100644 --- a/backlog/tasks/fl-76 - Written-for-AI-readers.md +++ b/backlog/tasks/fl-76 - Written-for-AI-readers.md @@ -51,5 +51,5 @@ npm run docs (scripts/make-docs.mjs) builds public/llms.txt and public/llms-full -Added the AI-reader pages, generated and committed: /llms.txt (the index: what isketch is, links to the format, tools and CLI) and /llms-full.txt (everything in one file: the .flow spec with real examples, the brief, MCP tools over stdio and HTTP with setup lines, the CLI, hosted links), plus /docs/format — a prerendered static page with the full spec, the architecture and signup examples as text beside their renderings, and a live Open-this-diagram link. Verified by e2e on the built site (both files serve their content, the page serves the spec) with the whole 79-test suite green. +Added the AI-reader pages, generated and committed: /llms.txt (the index: what isketch is, links to the format, tools and CLI) and /llms-full.txt (everything in one file: the .flow spec with real examples, the brief, MCP tools over stdio and HTTP with setup lines, the CLI, hosted links), plus /docs/format, a prerendered static page with the full spec, the architecture and signup examples as text beside their renderings, and a live Open-this-diagram link. Verified by e2e on the built site (both files serve their content, the page serves the spec) with the whole 79-test suite green. diff --git a/docs/format.template.html b/docs/format.template.html index fce7a46..d9e008d 100644 --- a/docs/format.template.html +++ b/docs/format.template.html @@ -3,7 +3,7 @@ - The .flow format — isketch + The .flow format · isketch - + The .flow format

Every isketch diagram can be written as plain text that reads well, diffs cleanly, and that - a coding agent reads exactly — and can edit back. + a coding agent reads exactly, and can edit back.

diff --git a/docs/launch.md b/docs/launch.md index dcc11ec..da12696 100644 --- a/docs/launch.md +++ b/docs/launch.md @@ -34,6 +34,28 @@ https://github.com/raj-khan/flow - **First comment:** why screenshots fail agents (names misread, directions lost, nothing to write back), the loop in one line, and one ask: which import should come next. +## Peerlist + +- **Title:** isketch: sketch it, hand it to your agent +- **Tagline:** Diagrams your coding agent reads exactly, not guesses from a screenshot. +- **Description:** + + Screenshotting a diagram into Claude or Copilot makes it guess: names misread, arrow directions + lost, and nothing it figures out can go back onto the picture. + + isketch is a sketchpad where every diagram is also plain text. Sketch an architecture, a + database or a flow, hand-drawn look included, and it exists as a `.flow` file with ids, kinds, + directions and notes that an agent reads exactly, and can edit back. + + - **Copy for AI** puts a Markdown brief on the clipboard in one click. + - **An MCP server** lets Claude Code or any agent list, read, validate, render and edit the + diagrams in your repo, and the open canvas shows its changes live. + - **Bring what you have:** draw.io, Excalidraw, Mermaid, docker-compose, OpenAPI, SQL, Prisma + and Drizzle import; `isketch scan` drafts a diagram of a whole repository. + - Pull requests get a visual diff, so the design and the code stop drifting apart. + + Works offline, needs no account, MIT licensed. + ## r/ClaudeAI **Title:** I stopped pasting diagram screenshots into Claude. Now it reads and edits the diagram itself. diff --git a/docs/llms-full.template.txt b/docs/llms-full.template.txt index 242ecb7..7e059e7 100644 --- a/docs/llms-full.template.txt +++ b/docs/llms-full.template.txt @@ -2,14 +2,14 @@ > isketch is a sketchpad for architecture and UI diagrams whose output is agent-ready: every sketch is also `.flow` text a coding agent reads exactly, and can edit back. Sketch the system, hand it to your agent, and the diagram stays true as the code changes. -Site: https://isketch.online — Editor: https://isketch.online/new — Format: https://isketch.online/docs/format +Site: https://isketch.online · Editor: https://isketch.online/new · Format: https://isketch.online/docs/format ## What it is A whiteboard that thinks in text. Draw loosely (hand-drawn look included), and the same diagram exists as precise text: `.flow` source, a Markdown brief, -Mermaid, SVG. A coding agent reads names, kinds, directions and notes exactly — -no guessing from pixels — and writes the diagram back through the same text, so +Mermaid, SVG. A coding agent reads names, kinds, directions and notes exactly, +no guessing from pixels, and writes the diagram back through the same text, so the design and the code stop drifting apart. The loop: **sketch the system → Copy for AI → the agent builds from the brief → diff --git a/docs/llms.template.txt b/docs/llms.template.txt index 5d23bb9..44e4358 100644 --- a/docs/llms.template.txt +++ b/docs/llms.template.txt @@ -7,8 +7,8 @@ Links: - [The editor](https://isketch.online/new): start drawing, no account. - [The .flow format](https://isketch.online/docs/format): the whole text format, with examples. This is the page an agent should read before writing a diagram. - [The brief](https://isketch.online/#what-your-agent-receives): what "Copy for AI" puts on the clipboard. -- [MCP over stdio](https://github.com/raj-khan/flow#connect-your-agent-mcp): `isketch mcp` — list, read, write, render and diff the `.flow` files in a folder. -- [MCP over HTTP](https://github.com/raj-khan/flow#the-same-tools-over-http): the hosted server at `/mcp` — read a diagram by its link, publish, update with its edit token. +- [MCP over stdio](https://github.com/raj-khan/flow#connect-your-agent-mcp): `isketch mcp`: list, read, write, render and diff the `.flow` files in a folder. +- [MCP over HTTP](https://github.com/raj-khan/flow#the-same-tools-over-http): the hosted server at `/mcp`: read a diagram by its link, publish, update with its edit token. - [The CLI](https://github.com/raj-khan/flow#command-line): render, check, import and export from a terminal or CI. - [Hosted links](https://github.com/raj-khan/flow#hosted-links-for-agents): every diagram behind one link, as a page, `.md`, `.flow`, `.svg`, `.json` or a PNG preview. @@ -33,7 +33,7 @@ style, is at [/docs/format](https://isketch.online/docs/format) and in `list_diagrams`, `read_diagram` (brief or `.flow` text), `write_diagram` (refuses invalid text, with line numbers), `render_diagram` (SVG), -`diff_diagrams` — the local server for the diagrams in a folder. The hosted +`diff_diagrams`, the local server for the diagrams in a folder. The hosted endpoint at `/mcp` answers `read_diagram` by link, `publish_diagram` and `update_diagram` with the diagram's edit token. Setup lines for both are in llms-full.txt. diff --git a/docs/loop.gif b/docs/loop.gif index d17aeaa..5a9469e 100644 Binary files a/docs/loop.gif and b/docs/loop.gif differ diff --git a/index.html b/index.html index c9e3981..dcd970e 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - isketch — sketch it, hand it to your agent + isketch: sketch it, hand it to your agent - + - + - isketch — sketch it, hand it to your agent + isketch: sketch it, hand it to your agent - + Sketch it. Hand it to your agent. agent reads exactly, and can write back.

- Start drawing — no account + Start drawing, no account Try it on this page

Try it right here

- The real editor, one click away. Drag a shape, rename it, connect two — nothing to - install, nothing to sign. + The real editor, one click away. Drag a shape, rename it, connect two: nothing to install, + nothing to sign.