> ## Documentation Index > Fetch the complete documentation index at: https://docs.kanaeru.ai/llms.txt > Use this file to discover all available pages before exploring further. # Blueprint editor and tools > Open, compare, annotate, edit, approve, and export blueprints in the web app. Every blueprint opens in an editor built for its type: a live prototype for a UX mockup, a canvas for a domain model, a diagram for a sequence. Every editor shares one toolbar, so reviewing a tech stack works the same way as reviewing a data model. To see what each type looks like, see [Blueprint examples](/concepts/blueprint-examples). ## Opening a blueprint Blueprints open next to the chat in your workspace, from an outcome's **Plan & Review** section or from a journey. From there you can: * dock the blueprint beside the chat, or open it full screen * choose **Open in a new tab** to give it its own browser tab * choose **Show chat alongside** to keep talking to Kana while you read ## Current and proposed Most blueprints come in two versions: * **Current**: how your product works today, captured from your code. * **Delta**: what Kana proposes for this outcome. Change markers tag each part of the delta as **added**, **modified**, or **removed**. Use the header to choose how to compare: | Control | What it does | | - | - | | **Overlay** | One editor, with the delta's changes highlighted inline | | **Split** | Side by side: **Current** on one side and **Delta** for the journey on the other | | **BP scope** | Show the blueprint for the whole **Outcome**, one **Task**, or one **Journey** | A UX mockup adds a **Baseline / Delta / Diff** toggle. In **Diff**, press and hold to peek at the baseline. ## The toolbar | Group | Controls | | - | - | | **View** | **Visual**, **Source**, or **Split** (both side by side) | | **Tools** | **Annotate** turns on annotation mode. **Exit Annotate** turns it off | | **Kana** | **Analyze & Suggest** asks Kana to review the blueprint and suggest improvements | | **Comments** | Your annotations and feedback for this blueprint | ## Reviewing changes A blueprint with changes shows **Review** and a count. The **review navigator** steps through each change, with ← and → to move between them. For each change you can **Approve**, **Flag**, **Comment**, or **Collect** it to send later. Group the list by **All** or **By Journey**. **Approve** stays disabled until you've reviewed every change. Until then, the button shows how many changes you've approved out of the total. Changed your mind? Choose **Reopen review**. A blueprint with a blocking annotation shows **Quarantined** until the annotation is resolved. ## Annotating Annotations tie a comment to an exact part of the blueprint: * **Pin** a single point * **Rectangle** around a region * **Freeform** draw, or point with an **Arrow** Click or drag to annotate. Press **Enter** on an annotation to **Fix inline with Kana**: she changes just that region and leaves the rest alone. Comments you **Collect** wait in the feedback panel. Choose **Tell Kana** or **Send to chat** to send them in one message, so Kana can apply several changes together. Editing a blueprint directly and pinning annotations to a region open at the [Craft level](/concepts/levels). Before that, you can comment, approve, and ask Kana to make any change in chat. ## The UX mockup editor A UX mockup is a live, clickable prototype of the real route, shown in a browser frame. | Control | Use it to | | - | - | | **Browse** | Click through the prototype like a user | | **Pin**, **Area**, **Hotspot** | Comment on a point or region, or mark a clickable hotspot | | **Desktop**, **Laptop**, **Tablet**, **Mobile** | Check the layout at each viewport | | **Fit**, **Open full screen** | Resize the frame | | **Show screens**, **Show comments** | List every screen, or every comment | In the comments panel, choose **Collect for Kana** to gather comments, then **Send to Kana**. ## Other editors | Blueprint | Editor | | - | - | | User Journey | Phases and steps, with the actor, channel, how the step feels, pain points, and time | | Sequence Diagram, State Machine | Mermaid diagrams, with the source beside them | | Data Model | An entity-relationship diagram from DBML | | Domain Model | A canvas of entities and aggregates from D2 | | Architecture | Component, deployment, integration, and data views from LikeC4 | | API Contract | An OpenAPI document, with each endpoint browsable | | Tech Stack | A card per decision: the choice, why, the alternatives, and the tradeoffs | | Quality Profile | A radar chart of each quality target against where the product is now | | Intent Spec | The intent, why it matters, success criteria, constraints, and when to escalate | ## Exporting Choose **Export** to download a blueprint: * **Source file**, in the blueprint's own format, such as `.dbml` or `.json` * **Markdown (.md)** * **Image (.svg)** or **Image (.png)**, for sequence diagrams, state machines, architecture, user journeys, and quality profiles Review markers are removed from every export. ## Japanese versions Use the language toggle to switch a blueprint between English and Japanese. If no Japanese version exists, choose **Create Japanese blueprint version**. ## From Codex and Claude The [Kanaeru app](/mcp/connect) opens blueprints inside Codex and Claude too. Your agent can export a blueprint as a portable snapshot, edit it locally, and save it back. A save only succeeds if nobody changed the blueprint since you exported it. ## Related topics - [Blueprints and understanding gaps](/concepts/blueprints.md) - [Levels: Ship, Craft, and Autonomy](/concepts/levels.md) - [Compared with other tools](/concepts/comparison.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.