Restructure Getting Started docs: add Introduction, rename Overview to Why Arc, add Models placeholder

- Add Introduction page with four card links (Why Arc, Quick Start, Workflows, Agents)
- Rename Overview to Why Arc with updated frontmatter
- Add rendered SVG workflow graph to Why Arc page
- Add Core Concepts > Models placeholder page
- Remove getting-started/workflows page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Helmkamp 2026-03-05 16:53:53 -05:00
parent ba1f37d57d
commit d91e0ea6fd
6 changed files with 148 additions and 12 deletions

View file

@ -0,0 +1,5 @@
---
title: "Models"
description: "How Arc routes tasks to LLM models and providers"
---

View file

@ -17,9 +17,9 @@
"group": "Getting Started",
"icon": "rocket",
"pages": [
"getting-started/overview",
"getting-started/quick-start",
"getting-started/workflows"
"getting-started/introduction",
"getting-started/why-arc",
"getting-started/quick-start"
]
},
{
@ -28,7 +28,8 @@
"pages": [
"core-concepts/how-arc-works",
"core-concepts/workflows",
"core-concepts/agents"
"core-concepts/agents",
"core-concepts/models"
]
},
{

View file

@ -0,0 +1,37 @@
---
title: "Introduction"
description: "Arc is the software factory for small teams of expert engineers"
---
Arc replaces the prompt-wait-review loop with version-controlled workflow graphs that orchestrate AI agents, shell commands, and human decisions into repeatable, long-horizon coding processes.
<Columns cols={2}>
<Card
title="Why Arc?"
icon="lightbulb"
href="/getting-started/why-arc"
>
The problems Arc solves for AI-assisted software teams.
</Card>
<Card
title="Quick Start"
icon="rocket"
href="/getting-started/quick-start"
>
Install Arc and run your first workflow in minutes.
</Card>
<Card
title="Workflows"
icon="diagram-project"
href="/core-concepts/workflows"
>
Learn how workflow graphs orchestrate agents, commands, and human gates.
</Card>
<Card
title="Agents"
icon="robot"
href="/core-concepts/agents"
>
Understand how Arc configures and runs LLM agents within workflows.
</Card>
</Columns>

View file

@ -1,6 +1,6 @@
---
title: "Overview"
description: "Why Arc?"
title: "Why Arc?"
description: "The problems Arc solves for AI-assisted software teams"
---
Arc is the software factory for small teams of expert engineers. It replaces the prompt-wait-review loop with version-controlled workflow graphs that orchestrate AI agents, shell commands, and human decisions into repeatable, long-horizon coding processes.
@ -42,7 +42,11 @@ Arc gives you a deterministic harness around non-deterministic AI. You define **
## What a workflow looks like
Workflows are defined in Graphviz DOT, a simple graph description language:
Workflows are defined in Graphviz DOT, a simple graph description language. Here's a plan-approve-implement workflow and its DOT source:
<Frame>
<img src="/images/plan-implement-workflow.svg" alt="Plan-Implement workflow graph" />
</Frame>
```dot
digraph PlanImplement {

View file

@ -1,5 +0,0 @@
---
title: "Workflows"
description: "Introduction to Arc workflows"
---

View file

@ -0,0 +1,94 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 14.1.2 (20260124.0452)
-->
<!-- Title: PlanImplement Pages: 1 -->
<svg width="674pt" height="44pt"
viewBox="0.00 0.00 674.00 44.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 40.25)">
<title>PlanImplement</title>
<!-- start -->
<g id="node1" class="node">
<title>start</title>
<polygon fill="none" stroke="#357f9e" points="35.26,-36.12 0,-18.13 35.26,-0.13 70.52,-18.12 35.26,-36.12"/>
<polyline fill="none" stroke="#357f9e" points="10.69,-23.58 10.69,-12.67"/>
<polyline fill="none" stroke="#357f9e" points="24.57,-5.58 45.95,-5.58"/>
<polyline fill="none" stroke="#357f9e" points="59.83,-12.67 59.83,-23.58"/>
<polyline fill="none" stroke="#357f9e" points="45.95,-30.67 24.57,-30.67"/>
<text xml:space="preserve" text-anchor="middle" x="35.26" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Start</text>
</g>
<!-- plan -->
<g id="node3" class="node">
<title>plan</title>
<path fill="none" stroke="#357f9e" d="M149.52,-36.12C149.52,-36.12 119.52,-36.12 119.52,-36.12 113.52,-36.12 107.52,-30.12 107.52,-24.12 107.52,-24.12 107.52,-12.12 107.52,-12.12 107.52,-6.12 113.52,-0.12 119.52,-0.12 119.52,-0.12 149.52,-0.12 149.52,-0.12 155.52,-0.12 161.52,-6.12 161.52,-12.12 161.52,-12.12 161.52,-24.13 161.52,-24.13 161.52,-30.12 155.52,-36.12 149.52,-36.12"/>
<text xml:space="preserve" text-anchor="middle" x="134.52" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Plan</text>
</g>
<!-- start&#45;&gt;plan -->
<g id="edge1" class="edge">
<title>start&#45;&gt;plan</title>
<path fill="none" stroke="#666666" d="M71.37,-18.12C79.34,-18.12 87.84,-18.12 95.91,-18.12"/>
<polygon fill="#666666" stroke="#666666" points="95.8,-21.63 105.8,-18.13 95.8,-14.63 95.8,-21.63"/>
</g>
<!-- exit -->
<g id="node2" class="node">
<title>exit</title>
<polygon fill="none" stroke="#357f9e" points="666.18,-36.25 629.93,-36.25 629.93,0 666.18,0 666.18,-36.25"/>
<polyline fill="none" stroke="#357f9e" points="641.93,-36.25 629.93,-24.25"/>
<polyline fill="none" stroke="#357f9e" points="629.93,-12 641.93,0"/>
<polyline fill="none" stroke="#357f9e" points="654.18,0 666.18,-12"/>
<polyline fill="none" stroke="#357f9e" points="666.18,-24.25 654.18,-36.25"/>
<text xml:space="preserve" text-anchor="middle" x="648.05" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Exit</text>
</g>
<!-- approve -->
<g id="node4" class="node">
<title>approve</title>
<polygon fill="none" stroke="#357f9e" points="353.68,-18.12 322.33,-36.12 259.62,-36.12 228.27,-18.13 259.62,-0.13 322.33,-0.12 353.68,-18.12"/>
<text xml:space="preserve" text-anchor="middle" x="290.98" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Approve Plan</text>
</g>
<!-- plan&#45;&gt;approve -->
<g id="edge2" class="edge">
<title>plan&#45;&gt;approve</title>
<path fill="none" stroke="#666666" d="M161.72,-18.12C176.76,-18.12 196.47,-18.12 215.91,-18.12"/>
<polygon fill="#666666" stroke="#666666" points="215.77,-21.63 225.77,-18.13 215.77,-14.63 215.77,-21.63"/>
</g>
<!-- approve&#45;&gt;plan -->
<g id="edge4" class="edge">
<title>approve&#45;&gt;plan</title>
<path fill="none" stroke="#666666" d="M247.15,-6.91C226.65,-3 201.77,-0.36 179.52,-3.88 177.32,-4.22 175.08,-4.66 172.83,-5.17"/>
<polygon fill="#666666" stroke="#666666" points="171.93,-1.79 163.18,-7.77 173.75,-8.55 171.93,-1.79"/>
<text xml:space="preserve" text-anchor="middle" x="194.9" y="-5.62" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#666666">Revise</text>
</g>
<!-- implement -->
<g id="node5" class="node">
<title>implement</title>
<path fill="none" stroke="#357f9e" d="M485.18,-36.12C485.18,-36.12 437.68,-36.12 437.68,-36.12 431.68,-36.12 425.68,-30.12 425.68,-24.12 425.68,-24.12 425.68,-12.12 425.68,-12.12 425.68,-6.12 431.68,-0.12 437.68,-0.12 437.68,-0.12 485.18,-0.12 485.18,-0.12 491.18,-0.12 497.18,-6.12 497.18,-12.12 497.18,-12.12 497.18,-24.13 497.18,-24.13 497.18,-30.12 491.18,-36.12 485.18,-36.12"/>
<text xml:space="preserve" text-anchor="middle" x="461.43" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Implement</text>
</g>
<!-- approve&#45;&gt;implement -->
<g id="edge3" class="edge">
<title>approve&#45;&gt;implement</title>
<path fill="none" stroke="#666666" d="M354.22,-18.12C374,-18.12 395.51,-18.12 413.97,-18.12"/>
<polygon fill="#666666" stroke="#666666" points="413.81,-21.63 423.81,-18.13 413.81,-14.63 413.81,-21.63"/>
<text xml:space="preserve" text-anchor="middle" x="389.68" y="-19.88" font-family="Helvetica,sans-Serif" font-size="10.00" fill="#666666">Approve</text>
</g>
<!-- simplify -->
<g id="node6" class="node">
<title>simplify</title>
<path fill="none" stroke="#357f9e" d="M580.93,-36.12C580.93,-36.12 546.18,-36.12 546.18,-36.12 540.18,-36.12 534.18,-30.12 534.18,-24.12 534.18,-24.12 534.18,-12.12 534.18,-12.12 534.18,-6.12 540.18,-0.12 546.18,-0.12 546.18,-0.12 580.93,-0.12 580.93,-0.12 586.93,-0.12 592.93,-6.12 592.93,-12.12 592.93,-12.12 592.93,-24.13 592.93,-24.13 592.93,-30.12 586.93,-36.12 580.93,-36.12"/>
<text xml:space="preserve" text-anchor="middle" x="563.55" y="-13.1" font-family="Helvetica,sans-Serif" font-size="12.00" fill="#1a1a1a">Simplify</text>
</g>
<!-- implement&#45;&gt;simplify -->
<g id="edge5" class="edge">
<title>implement&#45;&gt;simplify</title>
<path fill="none" stroke="#666666" d="M497.45,-18.12C505.5,-18.12 514.12,-18.12 522.37,-18.12"/>
<polygon fill="#666666" stroke="#666666" points="522.17,-21.63 532.17,-18.13 522.17,-14.63 522.17,-21.63"/>
</g>
<!-- simplify&#45;&gt;exit -->
<g id="edge6" class="edge">
<title>simplify&#45;&gt;exit</title>
<path fill="none" stroke="#666666" d="M593.41,-18.12C601.43,-18.12 610.14,-18.12 618.17,-18.12"/>
<polygon fill="#666666" stroke="#666666" points="618.13,-21.63 628.13,-18.13 618.13,-14.63 618.13,-21.63"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6 KiB