architype/TUTORIAL.md

Architype Tutorial

We'll be building a simple system diagram. You can see the result here.

Start clean

1. Select (clicking, touching, or with the arrow keys) the help box and delete it by pressing d. You can bring it back any time by pressing ?
2. Delete any other objects you've created by pressing d

Nodes

1. Create a node by pressing n
2. Label it cloudflare then press Enter to finish editing
3. Create another node by pressing n
4. Label it frontend1 then press Enter to finish editing
5. You should see both nodes in the diagram

Links

1. Navigate to the cloudflare node
2. Press space to highlight the node
3. Navigate to the frontend1 node
4. Press space to highlight the node
5. Press i to create a link
6. You should see a link between the nodes in the diagram

Deletion

There are now two copies of each node in the editor list: one standalone, and one inside the link. Architype treats these as references, so there's only one copy of each in the diagram. Let's clean that up.

1. Navigate to the cloudflare standalone node (node the one inside the link)
2. Press d to delete it
3. Do the same to the frontend1 standalone node
4. Note that the diagram is unchanged

Another link

1. Navigate to the frontend1 node inside the link

   Tip: You can use left/right or enter/escape to move in and out of sublists

2. Press space to highlight the node

3. Press i to create a link

4. Navigate to the blank second node in the link

5. Label it backend1