Build an SVG Architecture Diagram

Build Linear's architecture diagram as a React component using inline SVG.

Introduction

30 Second Summary

The best product teams don't use drag-and-drop tools to build their architecture diagrams. They write them in code, right alongside the product itself.

In this project, you will build a pixel-accurate recreation of Linear's architecture diagram from their /next announcement page as a reusable React component using inline SVG, CSS Modules, and Next.js.

What You'll Build

A code-defined SVG architecture diagram rendered as a React component inside a Next.js page, matching Linear's nested rectangle layout, muted gray color palette, bidirectional arrows, and external labels.

By the end of this project, you'll have:

A Next.js project with a dark-themed page that renders your architecture diagram component.
An ArchitectureDiagram React component using inline SVG with four nested sharp-cornered rectangles, text labels, bidirectional arrow markers, and external labels.
A CSS Module file with Linear's muted gray palette and scoped styling for the diagram.
An animated version of the diagram using Motion with staggered rectangle entrances, animated arrow path drawing, and a glowing pulse on the Agents box.

Are there any prerequisites?

You should be comfortable with React components, props, and JSX. A basic understanding of HTML and CSS is expected. Familiarity with SVG is helpful but not required. The project teaches you SVG concepts as you go.

Before We Start

Before We Start...

Set Up the Next.js Project

Before you can build the architecture diagram, you need a React environment to render it in. Next.js is the same framework Linear uses for their own site, so it is the most authentic choice for recreating their diagram. In this step, you will scaffold a Next.js project and install the animation library you will need later.

In This Step, Get Ready To:

Create a new Next.js project using the CLI.
Install the Motion animation package.
Start the dev server and verify everything works.

Create the Next.js App

The create-next-app CLI scaffolds a complete project with routing, bundling, and CSS Modules already configured. CSS Modules are built into Next.js with zero extra setup, which is exactly what you need for styling SVG elements.

Open your terminal and run the following command.

npx create-next-app@latest linear-diagram

The CLI will ask you a series of configuration questions.

Accept the defaults for each prompt: TypeScript yes, App Router yes, Tailwind no, src directory no.

Why No Tailwind?

You are styling SVG elements directly with CSS Modules, not HTML elements with utility classes. Tailwind would add unused overhead. CSS Modules give you scoped class names with zero configuration in Next.js. This is the same pattern Linear uses on their own site.

Once the scaffolding finishes, change into the project directory.

cd linear-diagram

Install Motion

Motion (formerly Framer Motion) is the animation library you will use in the secret mission to animate SVG elements. It provides components like motion.rect and motion.path that wrap standard SVG elements with animation superpowers. Installing it now means you will not need to restart your dev server later.

Run the following install command.

npm install motion

Start the Dev Server and Verify

Start the development server.

npm run dev

Open http://localhost:3000 in your browser.

What Should I See?

You should see the default Next.js welcome page with the Next.js logo and links to documentation. This confirms your project is scaffolded correctly and the dev server is running.

Keep the dev server running throughout the project. It will hot-reload your changes as you build the diagram.

Dev Server Not Starting?

Make sure you are inside the linear-diagram directory before running npm run dev. If port 3000 is already in use, Next.js will automatically try port 3001. Check your terminal output for the actual URL.

Help me troubleshoot my dev server.

Your project is scaffolded and ready to go. Next up, you will create the SVG shell and draw the first rectangle of the architecture diagram.

Build the Outer SVG Shell and LINEAR Rectangle

Every architecture diagram starts with a canvas. In SVG, that canvas is defined by a viewBox that sets up a coordinate system for everything you draw inside it. In this step, you'll create the ArchitectureDiagram component, draw the outermost "LINEAR" rectangle, style it with CSS Modules, and render it on a dark-themed page.

In This Step, Get Ready To:

Create the component file and its CSS Module.
Draw the outermost SVG rectangle with the "LINEAR" label.
Render the diagram on a dark background page.

Create the Component File Structure

React components work best when each one lives in its own file alongside its styles. You'll create a components folder inside app/ to keep your diagram component organized.

Create a new folder at app/components/.
Inside that folder, create two files: ArchitectureDiagram.tsx and ArchitectureDiagram.module.css.

Now open ArchitectureDiagram.tsx and add the base component with the SVG shell and the outermost rectangle.

import styles from './ArchitectureDiagram.module.css';

export default function ArchitectureDiagram() {
  return (
    <div className={styles.container}>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 390 629"
        className={styles.svg}
      >
        {/* LINEAR label above the outermost rectangle */}
        <text
          x={195}
          y={20}
          textAnchor="middle"
          fill="#86848D"
          fontSize={12}
          fontFamily="system-ui, sans-serif"
        >
          LINEAR
        </text>

        {/* Outermost rectangle */}
        <rect
          x={10}
          y={30}
          width={370}
          height={589}
          stroke="#2E2D31"
          strokeWidth={1}
          fill="none"
        />
      </svg>
    </div>
  );
}

What Does This Code Do?

The viewBox="0 0 390 629" attribute defines a coordinate system that is 390 units wide and 629 units tall. This matches Linear's exact diagram dimensions. Every element you draw inside this SVG uses these coordinates, regardless of how large or small the SVG renders on screen.

The <rect> element draws the outermost rectangle. Notice there are no rx or ry attributes. This keeps the corners perfectly sharp, matching Linear's original design.

What is a viewBox?

A viewBox is an SVG attribute that creates an internal coordinate system. The four numbers represent min-x, min-y, width, and height. Think of it as a virtual graph paper. When you place a rectangle at x={10}, that means 10 units from the left edge of this graph paper, not 10 pixels on your screen.

Set Up the CSS Module

CSS Modules automatically scope class names to the component that imports them. This means your .container class won't clash with any other .container in your project. Next.js supports CSS Modules out of the box with zero configuration.

Open ArchitectureDiagram.module.css and add the following styles.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg {
  width: 100%;
  max-width: 390px;
  height: auto;
}

What Do These Styles Do?

The .container class centers the SVG within its parent. The .svg class caps the diagram at 390px wide (matching the viewBox width) while letting it scale down on smaller screens. The height: auto preserves the aspect ratio.

Pro tip: why CSS Modules over Tailwind

Linear's own site uses CSS Modules (you can spot the __hash class naming pattern in their source code). For this project, CSS Modules are the authentic choice. They also work well with SVG components because you're mostly styling the wrapper, not individual SVG elements.

Render the Component on the Page

With the component built, you need a page to display it. You'll replace the default Next.js welcome page with a dark-themed page that renders your diagram.

Open app/page.tsx and replace its entire contents with the following code.

import ArchitectureDiagram from './components/ArchitectureDiagram';

export default function Home() {
  return (
    <main
      style={{
        backgroundColor: '#111',
        minHeight: '100vh',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        padding: '2rem',
      }}
    >
      <ArchitectureDiagram />
    </main>
  );
}

What Does This Page Do?

The backgroundColor: '#111' sets a dark background to match Linear's dark theme. The flexbox properties center the diagram both horizontally and vertically. The minHeight: '100vh' ensures the dark background fills the entire viewport.

You may also want to remove the default global styles that Next.js ships with, since they can interfere with your dark background.

Open app/globals.css and replace its contents with a minimal reset.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Save all files and check your browser at http://localhost:3000.

What Should I See?

You should see a dark page with a single sharp-cornered rectangle outlined in dark gray. The word "LINEAR" appears centered above the top edge of the rectangle in muted gray text (#86848D). The rectangle itself has no fill, just a thin border.

Seeing the Default Next.js Page Instead?

Make sure you saved app/page.tsx after replacing its contents. Also check that your import path matches the file location exactly: ./components/ArchitectureDiagram. If you still see issues, help me debug my page.

Your SVG canvas is set up and the outermost rectangle is on screen. Next up, you'll fill it with the nested Context, Rules, and Agents rectangles to build out the full diagram structure.

Add the Nested Rectangles

You have the outermost LINEAR rectangle rendering on a dark background. The real structure of this diagram comes from the layers inside it. Linear's architecture is represented as nested boxes: Context holds the project knowledge, Rules defines how the system behaves, and Agents sits at the core doing the actual work. In this step, you'll draw all three inner rectangles with their labels and text content.

In This Step, Get Ready To:

Draw the Context rectangle inside LINEAR with its list of text labels.
Add the Rules and Agents rectangles nested inside Context.
Verify the full four-level nesting looks correct in the browser.

Add the Context Rectangle

The Context rectangle is the second nesting level. It sits inside the LINEAR rectangle with consistent padding on all sides. This box represents all the project knowledge that Linear's system draws from.

Open app/components/ArchitectureDiagram.tsx in your editor.
Inside the SVG, after the LINEAR <rect> and its label, add a new <rect> for the Context box.
Add a <text> element for the "Context" label, positioned at the top-left area of this rectangle.
Below the Context label, add seven separate <text> elements stacked vertically for: "Plans", "Discussions", "Specs", "Technical designs", "Decisions", "Summaries", and "Code".

These text items represent the knowledge sources that sit in the Context area, to the left of where the Rules box will go. Space each <text> element with consistent vertical spacing (around 20-24px between each y value).

{/* Context rectangle - second nesting level */}
<rect
  x={24}
  y={60}
  width={342}
  height={545}
  stroke="#2E2D31"
  strokeWidth={1}
  fill="none"
/>
<text x={38} y={88} fill="#86848D" fontSize={13} fontFamily="sans-serif">
  Context
</text>

{/* Context text labels - stacked vertically on the left side */}
<text x={38} y={140} fill="#86848D" fontSize={11} fontFamily="sans-serif">Plans</text>
<text x={38} y={162} fill="#86848D" fontSize={11} fontFamily="sans-serif">Discussions</text>
<text x={38} y={184} fill="#86848D" fontSize={11} fontFamily="sans-serif">Specs</text>
<text x={38} y={206} fill="#86848D" fontSize={11} fontFamily="sans-serif">Technical designs</text>
<text x={38} y={228} fill="#86848D" fontSize={11} fontFamily="sans-serif">Decisions</text>
<text x={38} y={250} fill="#86848D" fontSize={11} fontFamily="sans-serif">Summaries</text>
<text x={38} y={272} fill="#86848D" fontSize={11} fontFamily="sans-serif">Code</text>

What does this code do?

The <rect> draws the Context box inset from the LINEAR rectangle. Notice there's no rx or ry attribute. This keeps the corners sharp, matching the original diagram exactly. The seven <text> elements each use the same fill color of #86848D, the muted gray from Linear's palette.

Why Use Separate Text Elements Instead of a List?

SVG doesn't have a list element like HTML's <ul>. Each piece of text needs its own <text> element with explicit x and y coordinates. This gives you pixel-level control over positioning, which is exactly how production SVG diagrams are built.

Add the Rules and Agents Rectangles

The Rules rectangle sits inside Context, positioned on the right side. The Agents rectangle then nests inside Rules. This creates the full four-level hierarchy: LINEAR > Context > Rules > Agents.

Add a <rect> for the Rules box, positioned to the right within the Context rectangle.
Add the "Rules" label at the top of this rectangle.
Add three <text> elements inside the Rules area for: "Automations", "Skills", and "Permissions".
Add a <rect> for the Agents box nested inside the Rules rectangle.
Add the "Agents" label at the top of the Agents rectangle.
Inside the Agents box, add a row of small <rect> elements in varying shades to create the pixelated block graphic.

{/* Rules rectangle - third nesting level, right-aligned within Context */}
<rect
  x={180}
  y={100}
  width={172}
  height={490}
  stroke="#2E2D31"
  strokeWidth={1}
  fill="none"
/>
<text x={194} y={128} fill="#86848D" fontSize={13} fontFamily="sans-serif">
  Rules
</text>

{/* Rules text labels */}
<text x={194} y={170} fill="#86848D" fontSize={11} fontFamily="sans-serif">Automations</text>
<text x={194} y={192} fill="#86848D" fontSize={11} fontFamily="sans-serif">Skills</text>
<text x={194} y={214} fill="#86848D" fontSize={11} fontFamily="sans-serif">Permissions</text>

{/* Agents rectangle - innermost nesting level */}
<rect
  x={200}
  y={250}
  width={132}
  height={320}
  stroke="#2E2D31"
  strokeWidth={1}
  fill="none"
/>
<text x={214} y={278} fill="#86848D" fontSize={13} fontFamily="sans-serif">
  Agents
</text>

{/* Pixelated block graphic inside Agents */}
<rect x={220} y={310} width={8} height={8} fill="#4A4A4A" />
<rect x={230} y={310} width={8} height={8} fill="#4A4A4A" />
<rect x={240} y={310} width={8} height={8} fill="#5A5A5A" />
<rect x={250} y={310} width={8} height={8} fill="#5A5A5A" />
<rect x={260} y={310} width={8} height={8} fill="#6A6A6A" />
<rect x={270} y={310} width={8} height={8} fill="#86848D" />
<rect x={280} y={310} width={8} height={8} fill="#6A6A6A" />
<rect x={290} y={310} width={8} height={8} fill="#5A5A5A" />
<rect x={300} y={310} width={8} height={8} fill="#4A4A4A" />

What is the pixelated block graphic?

The original diagram has a small row of blocks inside the Agents box that looks like a pixelated icon. Each small <rect> uses a slightly different shade of gray to create a gradient-like pattern. This matches the ░░░░░░▓▒▒░ visual from the original. Feel free to adjust the colors and number of blocks to get the look you want.

Verify the Nesting

Your full component should now contain all four rectangles with their labels and text content. Here is the complete component so you can compare your work.

I'll try it first

Check your browser at http://localhost:3000.
Confirm you see four nested sharp-cornered rectangles.
Verify the layout: LINEAR contains Context, Context contains Rules (right-aligned), and Rules contains Agents.
Check that all text labels appear in the muted gray color (#86848D).
Adjust spacing and positioning until the proportions feel right within the 390x629 viewport.

Let me check my work

import styles from './ArchitectureDiagram.module.css';

export default function ArchitectureDiagram() {
  return (
    <div className={styles.container}>
      <svg
        viewBox="0 0 390 629"
        xmlns="http://www.w3.org/2000/svg"
        className={styles.svg}
      >
        {/* LINEAR rectangle - outermost level */}
        <rect
          x={5}
          y={5}
          width={380}
          height={619}
          stroke="#2E2D31"
          strokeWidth={1}
          fill="none"
        />
        {/* LINEAR label centered above the top edge */}
        <text
          x={195}
          y={28}
          fill="#86848D"
          fontSize={13}
          fontFamily="sans-serif"
          textAnchor="middle"
        >
          LINEAR
        </text>

        {/* Context rectangle - second nesting level */}
        <rect
          x={24}
          y={60}
          width={342}
          height={545}
          stroke="#2E2D31"
          strokeWidth={1}
          fill="none"
        />
        <text x={38} y={88} fill="#86848D" fontSize={13} fontFamily="sans-serif">
          Context
        </text>

        {/* Context text labels - knowledge sources on the left */}
        <text x={38} y={140} fill="#86848D" fontSize={11} fontFamily="sans-serif">Plans</text>
        <text x={38} y={162} fill="#86848D" fontSize={11} fontFamily="sans-serif">Discussions</text>
        <text x={38} y={184} fill="#86848D" fontSize={11} fontFamily="sans-serif">Specs</text>
        <text x={38} y={206} fill="#86848D" fontSize={11} fontFamily="sans-serif">Technical designs</text>
        <text x={38} y={228} fill="#86848D" fontSize={11} fontFamily="sans-serif">Decisions</text>
        <text x={38} y={250} fill="#86848D" fontSize={11} fontFamily="sans-serif">Summaries</text>
        <text x={38} y={272} fill="#86848D" fontSize={11} fontFamily="sans-serif">Code</text>

        {/* Rules rectangle - third nesting level, right side */}
        <rect
          x={180}
          y={100}
          width={172}
          height={490}
          stroke="#2E2D31"
          strokeWidth={1}
          fill="none"
        />
        <text x={194} y={128} fill="#86848D" fontSize={13} fontFamily="sans-serif">
          Rules
        </text>

        {/* Rules text labels */}
        <text x={194} y={170} fill="#86848D" fontSize={11} fontFamily="sans-serif">Automations</text>
        <text x={194} y={192} fill="#86848D" fontSize={11} fontFamily="sans-serif">Skills</text>
        <text x={194} y={214} fill="#86848D" fontSize={11} fontFamily="sans-serif">Permissions</text>

        {/* Agents rectangle - innermost level */}
        <rect
          x={200}
          y={250}
          width={132}
          height={320}
          stroke="#2E2D31"
          strokeWidth={1}
          fill="none"
        />
        <text x={214} y={278} fill="#86848D" fontSize={13} fontFamily="sans-serif">
          Agents
        </text>

        {/* Pixelated block graphic inside Agents */}
        <rect x={220} y={310} width={8} height={8} fill="#4A4A4A" />
        <rect x={230} y={310} width={8} height={8} fill="#4A4A4A" />
        <rect x={240} y={310} width={8} height={8} fill="#5A5A5A" />
        <rect x={250} y={310} width={8} height={8} fill="#5A5A5A" />
        <rect x={260} y={310} width={8} height={8} fill="#6A6A6A" />
        <rect x={270} y={310} width={8} height={8} fill="#86848D" />
        <rect x={280} y={310} width={8} height={8} fill="#6A6A6A" />
        <rect x={290} y={310} width={8} height={8} fill="#5A5A5A" />
        <rect x={300} y={310} width={8} height={8} fill="#4A4A4A" />
      </svg>
    </div>
  );
}

What Should I See?

You should see four nested rectangles on the dark background. The outermost says "LINEAR" at the top. Inside it, "Context" appears with a vertical list of knowledge sources on the left. To the right, "Rules" contains its three labels. The innermost "Agents" box sits inside Rules with the small pixelated block graphic. All corners are sharp. All text is muted gray.

Rectangles Overlapping or Misaligned?

SVG positioning is absolute within the viewBox coordinate system. If your rectangles overlap, check that each inner rectangle's x and y values place it fully inside its parent. The inner rectangle's x + width must be less than the parent's x + width. The same rule applies for y + height. Help me debug my rectangle positioning.

Your diagram now has its full structural skeleton. Next up, you'll add the arrows and external labels that show how data flows through these layers.

Add the Arrows and External Labels

The nested rectangles form the skeleton of the diagram, but the arrows are what tell the story. They show how information flows between layers, from customer input on the left all the way through to the product output on the right. In this step, you'll draw bidirectional arrows connecting each layer and add the external labels that frame the diagram.

In This Step, Get Ready To:

Define a reusable SVG arrowhead marker in <defs>.
Draw bidirectional arrows connecting each layer of the diagram.
Add external text labels on the left and right sides of the diagram.

Draw the Bidirectional Arrows

SVG doesn't have a built-in "arrow" element. Instead, you define a small arrowhead shape as a <marker> inside a <defs> block, then reference that marker on any line or path element. This lets you reuse the same arrowhead across every arrow in the diagram.

Add a <defs> block at the top of your SVG, before any visible elements.
Inside <defs>, define a <marker> element with an id of arrowhead.
Inside the marker, draw a small triangle using a <path> element filled with #86848D to match the diagram's muted gray color.

<defs>
  <marker
    id="arrowhead"
    markerWidth="8"
    markerHeight="6"
    refX="8"
    refY="3"
    orient="auto"
  >
    <path d="M 0 0 L 8 3 L 0 6 Z" fill="#86848D" />
  </marker>
  <marker
    id="arrowhead-reverse"
    markerWidth="8"
    markerHeight="6"
    refX="0"
    refY="3"
    orient="auto"
  >
    <path d="M 8 0 L 0 3 L 8 6 Z" fill="#86848D" />
  </marker>
</defs>

What Do These Markers Do?

You're defining two markers: one for the forward-pointing arrowhead (arrowhead) and one for the reverse-pointing arrowhead (arrowhead-reverse). The orient="auto" attribute tells SVG to rotate the arrowhead to match the direction of the line it's attached to. The refX and refY values control the anchor point where the marker connects to the line.

Now draw the horizontal arrows that connect each layer. The original diagram has arrows between four pairs:

External labels (left side) to the Context box.
Context content area to the Rules box.
Rules content area to the Agents box.
Agents box to the external "Product" label (right side).

Add <line> elements for each arrow, using marker-start and marker-end to attach the arrowheads.
Position each arrow's y1 and y2 at the vertical midpoint of the content they connect.
Set the stroke to #86848D and use a stroke width of 1.

{/* Arrow: External labels -> Context */}
<line
  x1={20}
  y1={350}
  x2={55}
  y2={350}
  stroke="#86848D"
  strokeWidth={1}
  markerStart="url(#arrowhead-reverse)"
  markerEnd="url(#arrowhead)"
/>

{/* Arrow: Context -> Rules */}
<line
  x1={175}
  y1={350}
  x2={210}
  y2={350}
  stroke="#86848D"
  strokeWidth={1}
  markerStart="url(#arrowhead-reverse)"
  markerEnd="url(#arrowhead)"
/>

{/* Arrow: Rules -> Agents */}
<line
  x1={260}
  y1={350}
  x2={290}
  y2={350}
  stroke="#86848D"
  strokeWidth={1}
  markerStart="url(#arrowhead-reverse)"
  markerEnd="url(#arrowhead)"
/>

{/* Arrow: Agents -> Product */}
<line
  x1={350}
  y1={350}
  x2={380}
  y2={350}
  stroke="#86848D"
  strokeWidth={1}
  markerStart="url(#arrowhead-reverse)"
  markerEnd="url(#arrowhead)"
/>

Pro tip: adjust coordinates to your layout

The exact x1, x2, y1, and y2 values above are starting points. You'll need to adjust them based on where your rectangles are positioned from Step 3. The arrows should start and end at the edges of the rectangles they connect.

Add the External Labels

The diagram has text labels outside the LINEAR rectangle that represent what flows into and out of the system. On the left side, three labels describe incoming signals. On the right side, a single label represents the output.

Add three <text> elements to the left of the LINEAR rectangle for "Customer requests", "Bug reports", and "Feedback".
Stack them vertically with consistent spacing, aligned with the left arrow's entry point.
Add a single <text> element to the right of the LINEAR rectangle for "Product".
Set the fill on all external labels to #86848D to match the diagram's text color.

{/* External labels - left side */}
<text x={5} y={320} fill="#86848D" fontSize={10}>
  Customer requests
</text>
<text x={5} y={340} fill="#86848D" fontSize={10}>
  Bug reports
</text>
<text x={5} y={360} fill="#86848D" fontSize={10}>
  Feedback
</text>

{/* External label - right side */}
<text x={375} y={350} fill="#86848D" fontSize={10} textAnchor="end">
  Product
</text>

What Is textAnchor?

The textAnchor attribute controls how SVG text aligns relative to its x coordinate. Setting it to "end" right-aligns the text so it sits flush against the right edge of the diagram. The left-side labels use the default ("start"), which left-aligns them.

Final Visual Polish

Your diagram is now feature-complete. Take a moment to review everything against the original Linear diagram and fine-tune the details.

Confirm all rectangles have sharp corners with no rx or ry attributes.
Verify all text colors are #86848D.
Check that stroke colors and widths are consistent across all rectangles.
Ensure arrow positions align with the vertical midpoints of the content they connect.
Adjust spacing between the external labels and the arrows so they feel balanced.

Check your browser. You should see the complete static replica of Linear's architecture diagram: four nested rectangles, text labels inside each layer, bidirectional arrows connecting them, and external labels framing the inputs and output.

What Should I See?

Your diagram should show "Customer requests", "Bug reports", and "Feedback" on the left with arrows pointing into the nested boxes. On the right, an arrow exits toward the "Product" label. Every arrow has arrowheads on both ends, showing bidirectional flow between each layer.

Your static diagram is complete. It's a pixel-accurate, code-defined replica of Linear's architecture visual. Next up, you'll bring it to life with animation.

Secret mission

Animate the Diagram with Motion

Your diagram looks great, but it's static. Linear's real site uses animation to bring visuals to life. In this secret mission, you'll add staggered fade-in entrances for each nested rectangle, animated path drawing for the arrows, and a subtle glow pulse on the Agents box using Motion's SVG animation capabilities.

Before you go

Clean Up Your Resources

This project runs entirely locally, so there are no ongoing costs. Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

Next.js project directory (linear-diagram).
Node.js dev server running on localhost:3000.
Motion (Framer Motion) npm package installed locally.

Keep everything running

No action needed. Choose this if you are still actively building or want to experiment further with the diagram component.

Your dev server will keep running at http://localhost:3000.
Your project files remain in the linear-diagram directory.

Pause - I'll come back to this later

Shut down the running dev server to free up memory. Your project files stay on disk so you can pick up where you left off.

Go to the terminal where your dev server is running and press Ctrl + C to stop it.
When you are ready to resume, navigate back to the linear-diagram directory and run npm run dev again.

Delete - I don't want to use this again

Remove all project resources and start fresh.

Stop the dev server by pressing Ctrl + C in the terminal.
Navigate to the parent directory of your project.
Delete the entire project folder by running rm -rf linear-diagram on macOS/Linux, or rmdir /s /q linear-diagram on Windows.

Mission accomplished

That's a Wrap!

Nice work! You just built an editorial-quality SVG architecture diagram entirely in code, the same way Linear's engineering team builds theirs.

Here's what you learned:

Built a reusable React component that renders a complex nested architecture diagram using inline SVG elements like <rect>, <text>, <line>, and <marker>.
Positioned and layered four nested sharp-cornered rectangles with bidirectional arrow markers and external labels, matching Linear's exact 390x629 viewport pixel-for-pixel.
Styled the diagram with CSS Modules in Next.js, matching Linear's muted gray palette (#86848D text, #2E2D31 strokes) and dark theme context.
Animated the diagram with Motion: staggered rectangle fade-ins, animated arrow path drawing with pathLength, and a glowing pulse on the Agents box.

Ready to quiz yourself?