Edit the diagram you see
========================

Each example on this page has editable source and a live preview. **Reset**
restores its checked-in source. **Open in editor** remains available when you
want the standalone editor.

For a guided practice session, choose an exercise below. The full editor runs
inside this page, with its real selection, command preview, source edit,
diagnostics, and undo. Each exercise starts from its checked-in source; reset,
switching exercises, or reloading the frame returns to that source. Practice
edits stay separate from the draft saved in the standalone editor.

.. raw:: html

   <section class="sheeptext-editor-lab" id="sheeptext-editor-lab" aria-labelledby="sheeptext-editor-lab-heading" data-testid="tutorial-editor-lab">
     <h2 id="sheeptext-editor-lab-heading">Practice in the full editor</h2>
     <p>Choose an exercise, make the source change, and compare it with the drawing. Use the editor's Undo or Reset exercise to return to the checked-in starting point.</p>
     <div class="sheeptext-editor-lab-exercises" role="group" aria-label="Choose an editor exercise">
       <button type="button" data-tutorial-exercise="align" aria-pressed="false" disabled>Align nodes</button>
       <button type="button" data-tutorial-exercise="order" aria-pressed="false" disabled>Order nodes</button>
       <button type="button" data-tutorial-exercise="route" aria-pressed="false" disabled>Steer an edge</button>
       <button type="button" data-tutorial-exercise="membership" aria-pressed="false" disabled>Move into a group</button>
     </div>
     <p class="sheeptext-editor-lab-instruction" data-tutorial-instruction>Loading the checked-in exercise sources…</p>
     <div class="sheeptext-editor-lab-actions">
       <button type="button" data-tutorial-reset disabled>Reset exercise</button>
       <button type="button" data-tutorial-focus aria-pressed="false" disabled>Focus on exercise</button>
       <span role="status" aria-live="polite" data-testid="tutorial-editor-lab-status">Preparing the full editor.</span>
     </div>
     <iframe hidden data-testid="tutorial-editor-frame" title="Full SheepText editor exercise" loading="eager"></iframe>
     <noscript><p>Enable JavaScript to use the in-page editor. The checked-in source, live diagram, and Open in editor links below remain available.</p></noscript>
   </section>

.. raw:: html

   <script defer src="../../_static/tutorial-editor-lab.js"></script>

Align several nodes
-------------------

Select **Draft**, **Review**, and **Publish** in that order. Under **Arrange
items**, choose **Prefer row** and read the statement in the preview before
selecting **Apply arrangement**. Try **Require column** after resetting the
exercise. Row and column alignment put all selected nodes on a shared axis; a
preference can yield to stronger constraints, while an impossible requirement
reports a conflict.

.. sheeptext-example:: ../examples/sources/tutorial/guide-align.sheeptext
   :label: Align three workflow steps
   :lesson: align
   :alt: Three separate Draft, Review, and Publish boxes ready for a shared row or column

Order two nodes without aligning them
-------------------------------------

Select **Draft** first, then **Review**. Under **Order two nodes**, choose
**Prefer left of**. The first selected node is the subject: the preview inserts
a statement equivalent to ``prefer Draft left of Review`` and shows its source
line. Select **Apply node order**. Reset the exercise and try **Require below**
to see a vertical relation. These relations constrain order on one axis; they
do not put the nodes on a shared row or column.

.. sheeptext-example:: ../examples/sources/tutorial/guide-order.sheeptext
   :label: Order two workflow steps
   :lesson: order
   :alt: Separate Draft and Review boxes whose order can be changed without aligning them

Steer an edge
-------------

Select the unnamed arrow from **Client** to **Server** in the drawing or under
**Steer an edge**. Choose **Route below**, inspect the source preview, then
select **Apply route**. The editor adds ``route below`` to that arrow statement.
Try the named **Reply** arrow as well. **Route above**, **Route below**,
**Route left**, and **Route right** are route-side preferences; the final route
can differ when constraints conflict, and the editor reports the result.
Parallel arrows and each segment of a multi-hop arrow can also be selected
separately.

.. sheeptext-example:: ../examples/sources/tutorial/guide-route.sheeptext
   :label: Steer a request or return edge
   :lesson: route
   :alt: Two boxes connected by an unnamed request arrow and a named return arrow

Move a node into a group
------------------------

For a membership edit, select **Task** and **Region** in the in-page editor.
Choose **Move Task into Region**, inspect the proposed source diff, then
**Apply move**. Select Task alone afterward to see **Move Task out of Region**.
The editor proves the move on the complete source before offering Apply; it
does not leave a disconnected copy of the box behind.

.. sheeptext-example:: ../examples/sources/tutorial/guide-membership.sheeptext
   :label: Move a box into a group
   :name: tutorial-membership
   :alt: An empty named Region group beside a Task box that can be moved into the group

Selection belongs to the current render. After a source change replaces a
selected element, select again from the new diagram. Next, :doc:`icons` add
visual vocabulary to the same source-based workflow.