Design · Weekend build
Build your own Lucidchart
Boxes, arrows, and labels that don’t fall off. Lucidchart charges $9–$11 per person per month — that’s $108–$132 a year per person — for something you can replace with focused software of your own. Here is the honest scope, the honest timeline, and the exact prompt to hand your coding agent.
Who this replacement is for
This build targets a developer documenting flows and architectures for the team. The goal: draw clean flowcharts fast, keep connectors attached through every rearrangement, and share read-only links. If you need more than that, keep paying — the point of building it yourself is owning a tool shaped exactly like your workflow, not re-implementing a venture-funded roadmap.
Same build, different logo: this v1 also replaces Whimsical and draw.io — they all solve the same core job.
How long it actually takes
One number would be a lie, so here are three. Each tier is a real, usable product — pick the one that matches how much of Lucidchart you actually use.
| Estimate | What you get |
|---|---|
| 10 hours | shapes, attached connectors, snap-to-grid, exports |
| 3 days | swimlanes, layers, autosave, diagram templates |
| 3 months+ | multiplayer editing, visio import, huge shape libraries — the part you should probably skip |
What a minimal Lucidchart alternative needs
- a shape palette with rectangles, diamonds, ellipses, and text labels
- labeled connectors that stay attached and reroute when shapes move
- snap-to-grid with alignment and spacing guides
- one-click auto-layout for simple top-to-bottom flows
- SVG and PNG export plus shareable read-only links
Data model
Diagram, Shape, Connector, ShareLink
Integrations
browser SVG rendering
Capability context
Astro, Alpine, D1
The guardrail
Serve shared diagrams from unguessable read-only tokens, sanitize every label before rendering, and cap diagram complexity so the canvas stays responsive.
Deliberate non-goals
Do not build real-time multiplayer, Visio import, org-chart data sync, giant shape libraries, or a template marketplace.
The complete build prompt
Copy this into your coding agent of choice. It is scoped for a useful v1 — journeys, screens, business rules, data model, security, tests, and acceptance scenarios included. Pick your stack:
You are building a production-ready software product named “Boxline”, a deliberately focused alternative to Lucidchart. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a developer documenting flows and architectures for the team. Primary outcome: draw clean flowcharts fast, keep connectors attached through every rearrangement, and share read-only links. Product principle: optimize the exact workflow below instead of copying the full breadth of Lucidchart. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. The user creates a diagram, drags shapes from the palette onto the grid, connects them with labeled arrows, and watches connectors reroute as shapes move. 2. The user tidies a messy flow with alignment guides and one-click auto-layout, renames labels inline, and exports the result as SVG and PNG. 3. The user shares a read-only link with a teammate, edits the diagram after feedback, and confirms the same link now shows the updated version. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Diagram list: saved diagrams with name, thumbnail, last-edited time, duplicate and delete actions, and a new-diagram button. 2. Canvas: shape palette, snap-to-grid surface, selection handles, connector endpoints, alignment guides, inline label editing, zoom, and undo. 3. Export dialog: SVG and PNG options, scale and background choices, a rendered preview, and download. 4. Share view: read-only rendering with title, zoom and pan, no editing affordances, and no account requirement for visitors. CORE CAPABILITIES 1. a shape palette with rectangles, diamonds, ellipses, and text labels 2. labeled connectors that stay attached and reroute when shapes move 3. snap-to-grid with alignment and spacing guides 4. one-click auto-layout for simple top-to-bottom flows 5. SVG and PNG export plus shareable read-only links DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Anchor each connector endpoint to a shape and side, and recompute its path whenever either shape moves, resizes, or is deleted in the same undoable action. 2. Snap positions to the configured grid and show alignment guides when edges or centers line up with nearby shapes. 3. Apply auto-layout only to simple directed flows, preview the new arrangement before committing, and keep it a single undoable operation. 4. Serve read-only links from unguessable tokens that grant no edit rights, and sanitize every label before rendering shared diagrams. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Diagram, Shape, Connector, ShareLink. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Start with server-rendered Astro pages and ordinary HTML forms. Use HTMX for form submissions, partial navigation, and server-driven updates, then Alpine.js only for small local browser state. The core workflow must remain understandable if either enhancement layer fails. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with the AHA stack: Astro for routing, layouts, and server-rendered pages; HTMX for interactions that benefit from HTML fragment responses; and Alpine.js for small, local interface state. Prefer Cloudflare D1 for relational persistence, R2 for object storage, Workers for server endpoints and scheduled work, Durable Objects only for coordinated real-time state, and Workflows or Queues for durable background jobs—but only when the product requirements call for them. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies Astro, Alpine, D1 as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with browser SVG rendering. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Serve shared diagrams from unguessable read-only tokens, sanitize every label before rendering, and cap diagram complexity so the canvas stays responsive. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. Given a shape with three attached connectors is moved, every connector stays attached and reroutes without detaching from either endpoint. 2. Given a shape is deleted, its attached connectors are removed in the same undoable action and one undo restores both. 3. Given a visitor opens a read-only link, they can view, zoom, and pan the diagram, but every edit endpoint rejects the read-only token. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build real-time multiplayer, Visio import, org-chart data sync, giant shape libraries, or a template marketplace.
You are building a production-ready software product named “Boxline”, a deliberately focused alternative to Lucidchart. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a developer documenting flows and architectures for the team. Primary outcome: draw clean flowcharts fast, keep connectors attached through every rearrangement, and share read-only links. Product principle: optimize the exact workflow below instead of copying the full breadth of Lucidchart. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. The user creates a diagram, drags shapes from the palette onto the grid, connects them with labeled arrows, and watches connectors reroute as shapes move. 2. The user tidies a messy flow with alignment guides and one-click auto-layout, renames labels inline, and exports the result as SVG and PNG. 3. The user shares a read-only link with a teammate, edits the diagram after feedback, and confirms the same link now shows the updated version. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Diagram list: saved diagrams with name, thumbnail, last-edited time, duplicate and delete actions, and a new-diagram button. 2. Canvas: shape palette, snap-to-grid surface, selection handles, connector endpoints, alignment guides, inline label editing, zoom, and undo. 3. Export dialog: SVG and PNG options, scale and background choices, a rendered preview, and download. 4. Share view: read-only rendering with title, zoom and pan, no editing affordances, and no account requirement for visitors. CORE CAPABILITIES 1. a shape palette with rectangles, diamonds, ellipses, and text labels 2. labeled connectors that stay attached and reroute when shapes move 3. snap-to-grid with alignment and spacing guides 4. one-click auto-layout for simple top-to-bottom flows 5. SVG and PNG export plus shareable read-only links DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Anchor each connector endpoint to a shape and side, and recompute its path whenever either shape moves, resizes, or is deleted in the same undoable action. 2. Snap positions to the configured grid and show alignment guides when edges or centers line up with nearby shapes. 3. Apply auto-layout only to simple directed flows, preview the new arrangement before committing, and keep it a single undoable operation. 4. Serve read-only links from unguessable tokens that grant no edit rights, and sanitize every label before rendering shared diagrams. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Diagram, Shape, Connector, ShareLink. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Render with React Server Components by default. Use Server Actions for authenticated form mutations and add Client Components only for interactions that genuinely require browser state, browser APIs, drag-and-drop, or live updates. The core workflow must remain understandable before client-side JavaScript finishes loading. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with Next.js, the App Router, and TypeScript. Use Server Components by default, Server Actions for authenticated mutations, and Route Handlers for public APIs, OAuth callbacks, webhooks, feeds, uploads, and downloads. Use PostgreSQL through Drizzle ORM with versioned migrations and an isolated test database. Access S3-compatible object storage through a server-only adapter, and run slow or retryable work in a real job or workflow system instead of the request lifecycle. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies Astro, Alpine, D1 as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with browser SVG rendering. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Serve shared diagrams from unguessable read-only tokens, sanitize every label before rendering, and cap diagram complexity so the canvas stays responsive. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. Given a shape with three attached connectors is moved, every connector stays attached and reroutes without detaching from either endpoint. 2. Given a shape is deleted, its attached connectors are removed in the same undoable action and one undo restores both. 3. Given a visitor opens a read-only link, they can view, zoom, and pan the diagram, but every edit endpoint rejects the read-only token. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build real-time multiplayer, Visio import, org-chart data sync, giant shape libraries, or a template marketplace.
You are building a production-ready software product named “Boxline”, a deliberately focused alternative to Lucidchart. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a developer documenting flows and architectures for the team. Primary outcome: draw clean flowcharts fast, keep connectors attached through every rearrangement, and share read-only links. Product principle: optimize the exact workflow below instead of copying the full breadth of Lucidchart. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. The user creates a diagram, drags shapes from the palette onto the grid, connects them with labeled arrows, and watches connectors reroute as shapes move. 2. The user tidies a messy flow with alignment guides and one-click auto-layout, renames labels inline, and exports the result as SVG and PNG. 3. The user shares a read-only link with a teammate, edits the diagram after feedback, and confirms the same link now shows the updated version. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Diagram list: saved diagrams with name, thumbnail, last-edited time, duplicate and delete actions, and a new-diagram button. 2. Canvas: shape palette, snap-to-grid surface, selection handles, connector endpoints, alignment guides, inline label editing, zoom, and undo. 3. Export dialog: SVG and PNG options, scale and background choices, a rendered preview, and download. 4. Share view: read-only rendering with title, zoom and pan, no editing affordances, and no account requirement for visitors. CORE CAPABILITIES 1. a shape palette with rectangles, diamonds, ellipses, and text labels 2. labeled connectors that stay attached and reroute when shapes move 3. snap-to-grid with alignment and spacing guides 4. one-click auto-layout for simple top-to-bottom flows 5. SVG and PNG export plus shareable read-only links DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Anchor each connector endpoint to a shape and side, and recompute its path whenever either shape moves, resizes, or is deleted in the same undoable action. 2. Snap positions to the configured grid and show alignment guides when edges or centers line up with nearby shapes. 3. Apply auto-layout only to simple directed flows, preview the new arrangement before committing, and keep it a single undoable operation. 4. Serve read-only links from unguessable tokens that grant no edit rights, and sanitize every label before rendering shared diagrams. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Diagram, Shape, Connector, ShareLink. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Start with server-rendered Blade views and ordinary forms. Use Livewire for focused server-driven interactions and Alpine.js only for small local interface state. The core workflow must remain understandable without relying on a client-side application shell. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with Laravel, PHP, Blade, Livewire, and Alpine.js. Use controllers and Blade forms for durable navigation, Livewire for focused interactions, Form Requests for validation, Policies and Gates for authorization, and small application actions or services for domain transitions. Use Eloquent with migrations, database constraints, and transactions; Laravel Storage for private S3-compatible files; queued Jobs for retryable work; the Scheduler for recurring work; and Notifications or Mail for email. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies Astro, Alpine, D1 as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with browser SVG rendering. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Serve shared diagrams from unguessable read-only tokens, sanitize every label before rendering, and cap diagram complexity so the canvas stays responsive. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. Given a shape with three attached connectors is moved, every connector stays attached and reroutes without detaching from either endpoint. 2. Given a shape is deleted, its attached connectors are removed in the same undoable action and one undo restores both. 3. Given a visitor opens a read-only link, they can view, zoom, and pan the diagram, but every edit endpoint rejects the read-only token. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build real-time multiplayer, Visio import, org-chart data sync, giant shape libraries, or a template marketplace.
You are building a production-ready software product named “Boxline”, a deliberately focused alternative to Lucidchart. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components. WORKING AGREEMENT Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests. PRODUCT BRIEF Primary user: a developer documenting flows and architectures for the team. Primary outcome: draw clean flowcharts fast, keep connectors attached through every rearrangement, and share read-only links. Product principle: optimize the exact workflow below instead of copying the full breadth of Lucidchart. A first-time user should understand what to do from the interface itself, without a tour or documentation. END-TO-END USER JOURNEYS Implement all of these flows through the real interface and persistent data layer: 1. The user creates a diagram, drags shapes from the palette onto the grid, connects them with labeled arrows, and watches connectors reroute as shapes move. 2. The user tidies a messy flow with alignment guides and one-click auto-layout, renames labels inline, and exports the result as SVG and PNG. 3. The user shares a read-only link with a teammate, edits the diagram after feedback, and confirms the same link now shows the updated version. SCREENS AND INFORMATION ARCHITECTURE Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state. 1. Diagram list: saved diagrams with name, thumbnail, last-edited time, duplicate and delete actions, and a new-diagram button. 2. Canvas: shape palette, snap-to-grid surface, selection handles, connector endpoints, alignment guides, inline label editing, zoom, and undo. 3. Export dialog: SVG and PNG options, scale and background choices, a rendered preview, and download. 4. Share view: read-only rendering with title, zoom and pan, no editing affordances, and no account requirement for visitors. CORE CAPABILITIES 1. a shape palette with rectangles, diamonds, ellipses, and text labels 2. labeled connectors that stay attached and reroute when shapes move 3. snap-to-grid with alignment and spacing guides 4. one-click auto-layout for simple top-to-bottom flows 5. SVG and PNG export plus shareable read-only links DETAILED BEHAVIOR AND BUSINESS RULES Treat these as server-enforced product requirements, not interface suggestions: 1. Anchor each connector endpoint to a shape and side, and recompute its path whenever either shape moves, resizes, or is deleted in the same undoable action. 2. Snap positions to the configured grid and show alignment guides when edges or centers line up with nearby shapes. 3. Apply auto-layout only to simple directed flows, preview the new arrangement before committing, and keep it a single undoable operation. 4. Serve read-only links from unguessable tokens that grant no edit rights, and sanitize every label before rendering shared diagrams. DATA MODEL AND LIFECYCLE Design a small relational schema centered on Diagram, Shape, Connector, ShareLink. Before implementing it, document: 1. Each table’s purpose, primary key, ownership or tenant boundary, timestamps, status fields, and important attributes. 2. Foreign keys, uniqueness constraints, check constraints, indexes needed by the named screens, and transaction boundaries for multi-record changes. 3. The allowed lifecycle or state transitions, who may trigger each transition, which transitions are terminal or reversible, and what audit history must remain immutable. 4. Archive, retention, and deletion behavior, including what happens to dependent records and external files. 5. Idempotency strategy for submissions, jobs, imports, notifications, webhooks, or retries where applicable. Use migrations rather than ad-hoc schema creation. Store time instants consistently and retain named timezone context whenever local schedules or dates matter. Never rely on a counter, disabled button, or client-side check to preserve a business invariant. USERS, AUTHENTICATION, AND PERMISSIONS Implement only the roles required by the stated audience. Make the ownership and visibility model explicit before coding. Enforce authorization in every server-side query and mutation, including search, exports, attachments, live updates, and guessed URLs—not merely by hiding controls. Use secure session defaults, protect state-changing requests, and provide an understandable signed-out, expired-session, and forbidden state. Seed distinct users when multiple roles are required so permissions can be demonstrated and tested. INTERACTION AND VISUAL DIRECTION The product should feel fast, calm, focused, and credible rather than like a generic admin template. Use a clear visual hierarchy, restrained color, readable typography, generous hit targets, and consistent placement for primary actions. Start with server-rendered HTML and progressively enhance only the interactions that benefit from it. The core workflow must remain understandable if enhancement fails. Start with server-rendered Rails views and ordinary forms. Use Turbo for navigation, submissions, and server-driven updates, then Stimulus only for small browser-side behavior. Do not turn the product into a client-side SPA, and keep the core workflow usable when enhancement fails. Design mobile layouts intentionally instead of simply stacking desktop panels. Support keyboard navigation, visible focus, semantic landmarks, explicit labels, useful page titles, reduced-motion preferences, and screen-reader announcements for asynchronous results. Never use color alone to communicate state. Destructive actions require clear scope and confirmation; safe repeated actions should be idempotent. TECHNICAL DIRECTION Build this version with Ruby on Rails and Hotwire: Turbo for navigation, form submissions, and server-driven updates, and Stimulus for small browser-side behavior. Use RESTful controllers with strong parameters and explicit authorization, with domain transitions in testable models or small application services. Use Active Record migrations plus database-level constraints and transactions; Active Storage with an S3-compatible service for private files; Active Job with a durable queue backend for retryable work; Action Mailer for email; and Action Cable only when live updates are required. Keep domain rules in testable server-side modules instead of route handlers or UI components. Separate persistence, external providers, and background work behind small interfaces without building a framework. Prefer ordinary HTML forms and URLs for durable navigation; use optimistic interaction only when failure can be reconciled clearly. The product brief currently identifies Astro, Alpine, D1 as capability context. Preserve any required native, browser-only, edge, storage, real-time, or background-processing capability through a narrow adapter appropriate to the selected framework. If the core workflow genuinely requires native or browser APIs, keep that runtime as the primary execution surface rather than simulating inaccessible capabilities or inventing an unnecessary web surface. Integrate with browser SVG rendering. For every integration: - List required environment variables in an .env.example without real secrets. - Add a small adapter with timeouts, normalized errors, and a deterministic local fake or development path. - Verify inbound signatures and deduplicate provider events where supported. - Keep credentials server-side, encrypt long-lived provider tokens at rest, and redact secrets and sensitive payloads from logs. - Define retry, backoff, and idempotency behavior for any side effect that can be repeated. SECURITY AND PRIVACY Serve shared diagrams from unguessable read-only tokens, sanitize every label before rendering, and cap diagram complexity so the canvas stays responsive. Validate, normalize, and length-limit all untrusted input on the server. Escape rendered content by default, sanitize any intentionally accepted markup, rate-limit public or abuse-prone actions, and use private object storage plus short-lived authorized URLs for sensitive files. Collect the minimum personal data necessary for the named workflow. Document retention and deletion behavior. Add specific protections for the riskier surfaces in this app, such as uploads, redirects, outbound requests, email delivery, OAuth, webhooks, CSV import or export, and real-time connections. ACCEPTANCE SCENARIOS Automate these app-specific scenarios at the most appropriate level: 1. Given a shape with three attached connectors is moved, every connector stays attached and reroutes without detaching from either endpoint. 2. Given a shape is deleted, its attached connectors are removed in the same undoable action and one undo restores both. 3. Given a visitor opens a read-only link, they can view, zoom, and pan the diagram, but every edit endpoint rejects the read-only token. TESTING Add focused unit tests for state transitions, authorization predicates, normalization, date or money calculations, and other risky domain rules. Add integration tests for persistence constraints and each external adapter’s success, timeout, retry, and rejection paths. Add at least one browser-level test for every end-to-end journey above, including one small-screen viewport. Tests must use isolated data and run through a documented single command. OPERATIONS AND FAILURE RECOVERY Add structured server logs with request, job, or event correlation IDs but no secrets or unnecessarily sensitive data. Make failures actionable in both the interface and logs. Background work must expose pending, succeeded, failed, and retrying states where relevant; do not silently swallow errors. Include safe database migration and rollback guidance, seed data, backup and restore notes, external-data cleanup behavior, and a basic health or diagnostic path appropriate to the stack. DELIVERABLES Ship the working application, migrations, representative seed data, tests, .env.example, and a concise README. The README must cover prerequisites, local setup, environment variables, migrations, seed and test commands, deployment, integration setup, backup and restore, security decisions, and known limitations. Seed data should exercise the happy path plus at least one empty, failed, overdue, expired, archived, or permission-restricted state relevant to the product. DEFINITION OF DONE The app is complete when a fresh developer can follow the README, create and migrate the database, run the app, sign in as each relevant role, complete every named journey using real persisted data, refresh without losing state, recover from common failures, and use the core interface on phone and desktop. All acceptance scenarios pass, permission boundaries are covered by tests, and no core screen is left as a placeholder. NON-GOALS Do not build real-time multiplayer, Visio import, org-chart data sync, giant shape libraries, or a template marketplace.
Build just one piece
Not ready to replace all of Lucidchart? Fine. These are the peculiar sub-problems hiding inside it — the parts that are actually interesting to build. Each one is a standalone prompt, scoped to an evening, no strings attached to the full build.
The arrow that never lets go of its boxConnectors anchored to shape sides, rerouting live through every drag.
Build connector attachment and rerouting for a diagram editor. A connector's endpoints are not coordinates; each anchors to a shape and a side (or a fractional offset along it), so the geometry is derived: whenever either shape moves or resizes, recompute the anchor's world position from the shape's current bounds and redraw the path live during the drag, not after mouse-up. Route as clean orthogonal segments with rounded corners, pick sensible sides automatically when shapes pass each other (an arrow shouldn't exit stage-left toward a shape now on the right), and keep the label riding the path's midpoint through every reroute. Arrowheads must sit precisely on the shape's border, not the center point underneath it, so intersect the path with the shape outline per shape type, rectangle, diamond, ellipse. Dragging an endpoint should highlight candidate anchor points and let it reattach to a different shape or side. Done when: moving a shape with three attached connectors reroutes all three without any endpoint detaching, labels track their midpoints, and arrowheads touch borders exactly on all shape types.
The snap that feels like magnetism, not handcuffsGrid snapping plus alignment guides when edges and centers line up.
Build snap-to-grid and alignment guides for a diagram canvas. Two cooperating systems. Grid snap: while dragging, round the shape's position to the configured grid, applied in canvas coordinates so it stays correct at every zoom level, with a modifier key for temporary free positioning. Alignment guides: as a shape moves, compare its edges and center against nearby shapes' edges and centers; within a small pixel threshold, draw a guide line through the aligned positions and snap the dragged shape to exact alignment. Alignment wins over grid when both apply, since matching a neighbor matters more than matching the grid. Add equal-spacing hints: when the dragged shape sits near the spacing interval of two others in a row, show the distance markers and snap to it. Keep hit-testing fast enough for smooth dragging, only shapes near the drag need checking, and clear every guide the instant the drag ends. Done when: dragged shapes land on the grid at any zoom, edge and center alignments produce visible guides with an exact snap, and the modifier key bypasses everything.
The undo stack where delete means one Ctrl-ZA shape and its three connectors die together and resurrect together.
Build a command-based undo system for a diagram editor. Model every mutation as a command object carrying enough data to apply and revert itself: add shape, move, resize, edit label, add connector, delete. The case that breaks naive implementations: deleting a shape also deletes its attached connectors, and that whole cascade must be one compound command, one undo restores the shape and all its connectors with their exact anchors, labels, and paths. Same for multi-select drags and auto-layout: group constituent operations into a single undoable unit. Coalesce noise: a continuous drag is one move command recorded at mouse-up with start and end positions, not four hundred micro-moves. Redo works until a new action truncates the redo branch. Cap the stack's memory by depth. Keep selection state coherent, undoing a delete reselects what came back. Done when: delete-then-undo restores a shape plus every attached connector exactly, a long drag consumes one undo step, and any sequence of do, undo, redo leaves the document consistent.
The auto-layout that untangles the flowchartLayered top-to-bottom layout with a preview, and one undo puts it all back.
Build one-click auto-layout for simple directed flowcharts. Given shapes and directed connectors, compute a clean top-to-bottom arrangement using layered layout: assign each shape a layer by longest path from the roots, order shapes within each layer to reduce connector crossings (the barycenter heuristic, sweeping down and up a few times, is plenty), then assign coordinates with consistent horizontal and vertical gaps, snapped to the grid. Respect the feature's own guardrails: apply it only to simple directed flows, detect cycles first and either break them for layout purposes at the least-important edge or decline with a clear message, never hang. Show the proposed arrangement as a preview the user confirms or cancels, and commit the whole rearrangement as one undoable operation so a single undo restores every original position. Connectors reroute against the new positions after commit. Done when: a hand-tangled 10-node flow lays out with minimal crossings and even spacing, cyclic graphs get a graceful refusal or sensible handling, and one undo restores the pre-layout diagram exactly.
Frequently asked questions
How long does it take to build your own Lucidchart?
A basic version — shapes, attached connectors, snap-to-grid, exports — takes about 10 hours. Roughly 3 days gets you a solid v1 with swimlanes, layers, autosave, diagram templates. Matching everything Lucidchart really does (multiplayer editing, visio import, huge shape libraries) is closer to 3 months+, which is exactly why you should scope down instead.
How much does Lucidchart cost if I keep subscribing?
Lucidchart runs $9–$11 per person per month on public paid plans, which is $108–$132 per year for every person on your team. A focused self-built replacement costs your build time plus close-to-zero hosting.
What stack should I use to build a Lucidchart alternative?
The build prompt on this page ships in four flavors: the AHA stack (Astro, HTMX, Alpine.js), Next.js, Laravel, and Ruby on Rails. The capability context for this product is Astro, Alpine, D1. Pick the stack you already know — the scope matters more than the framework.
What features does a minimal Lucidchart replacement need?
A useful v1 needs: a shape palette with rectangles, diamonds, ellipses, and text labels; labeled connectors that stay attached and reroute when shapes move; snap-to-grid with alignment and spacing guides; one-click auto-layout for simple top-to-bottom flows; SVG and PNG export plus shareable read-only links. Everything else is scope creep until you personally miss it.
What should I deliberately not build?
Do not build real-time multiplayer, Visio import, org-chart data sync, giant shape libraries, or a template marketplace.
Does this build also replace Whimsical and draw.io?
Yes. Lucidchart, Whimsical and draw.io all solve the same core job — draw clean flowcharts fast, keep connectors attached through every rearrangement, and share read-only links. The scoped v1 on this page covers what most people use any of them for, so one focused build replaces whichever you currently pay for.