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 (not the one inside the link)
   Tip: Press left or escape to exit the link sublist
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
6. Note the new node and link in the diagram

Groups

1. Press escape repeatedly to navigate to the top level and clear highlighting
2. Highlight one frontend1 and one backend1 node (one of each, any will do)
3. Press g to create a group
4. Note the outline and physical grouping in the diagram

Labels

1. While in the group sublist, press a to create a label
2. Set the content to us-east1
3. Note the label text on the group in the diagram
4. Navigate to the cloudflare -> frontend1 link
5. Add a label with the content HTTPS
6. Note the label text on the link in the diagram
7. Label the frontend1 -> backend1 link gRPC

Finishing up

1. Create links:
2. cloudflare -> frontend2 (labeled HTTPS)
3. frontend2 -> backend2 (labeled gRPC)
4. backend1 -> database
5. backend2 -> database
6. Create groups:
7. frontend2 + backend2 (labeled us-west1)

You're done!

Try out u (undo), U (redo), and m (change theme). Then close & reopen the site to see the peristent storage in action.