architype/TUTORIAL.md

# Architype Tutorial

We'll be building a simple system diagram. You can see the result [here](https://architype.io/#eyJ2ZXJzaW9uIjoxLCJnZW5lcmF0aW9uIjoxOTgsIm5leHRJZCI6MjMyLCJlZGl0b3IiOlt7InR5cGUiOiJsaW5rIiwiaWQiOiJlbnRyeTI4IiwibGFiZWwiOiJIVFRQUyIsImZyb20iOnsidHlwZSI6Im5vZGUiLCJpZCI6ImVudHJ5MjkiLCJsYWJlbCI6ImNsb3VkZmxhcmUiLCJoaWdobGlnaHQiOmZhbHNlfSwidG8iOnsidHlwZSI6Im5vZGUiLCJpZCI6ImVudHJ5MzAiLCJsYWJlbCI6ImZyb250ZW5kMSIsImhpZ2hsaWdodCI6ZmFsc2V9LCJoaWdobGlnaHQiOmZhbHNlfSx7InR5cGUiOiJsaW5rIiwiaWQiOiJlbnRyeTMxIiwibGFiZWwiOiJIVFRQUyIsImZyb20iOnsidHlwZSI6Im5vZGUiLCJpZCI6ImVudHJ5MzIiLCJsYWJlbCI6ImNsb3VkZmxhcmUiLCJoaWdobGlnaHQiOmZhbHNlfSwidG8iOnsidHlwZSI6Im5vZGUiLCJpZCI6ImVudHJ5MzMiLCJsYWJlbCI6ImZyb250ZW5kMiIsImhpZ2hsaWdodCI6ZmFsc2V9LCJoaWdobGlnaHQiOmZhbHNlfSx7InR5cGUiOiJsaW5rIiwiaWQiOiJlbnRyeTYiLCJsYWJlbCI6ImdSUEMiLCJmcm9tIjp7InR5cGUiOiJub2RlIiwiaWQiOiJlbnRyeTciLCJsYWJlbCI6ImZyb250ZW5kMSIsImhpZ2hsaWdodCI6ZmFsc2V9LCJ0byI6eyJ0eXBlIjoibm9kZSIsImlkIjoiZW50cnk4IiwibGFiZWwiOiJiYWNrZW5kMSIsImhpZ2hsaWdodCI6ZmFsc2V9LCJoaWdobGlnaHQiOmZhbHNlfSx7InR5cGUiOiJncm91cCIsImlkIjoiZW50cnkxOCIsImxhYmVsIjoidXMtZWFzdDEiLCJtZW1iZXJzIjpbeyJ0eXBlIjoibm9kZSIsImlkIjoiZW50cnkxOSIsImxhYmVsIjoiZnJvbnRlbmQxIiwiaGlnaGxpZ2h0IjpmYWxzZX0seyJ0eXBlIjoibm9kZSIsImlkIjoiZW50cnkyMCIsImxhYmVsIjoiYmFja2VuZDEiLCJoaWdobGlnaHQiOmZhbHNlfV0sImhpZ2hsaWdodCI6ZmFsc2V9LHsidHlwZSI6ImxpbmsiLCJpZCI6ImVudHJ5MTIiLCJsYWJlbCI6ImdSUEMiLCJmcm9tIjp7InR5cGUiOiJub2RlIiwiaWQiOiJlbnRyeTEzIiwibGFiZWwiOiJmcm9udGVuZDIiLCJoaWdobGlnaHQiOmZhbHNlfSwidG8iOnsidHlwZSI6Im5vZGUiLCJpZCI6ImVudHJ5MTQiLCJsYWJlbCI6ImJhY2tlbmQyIiwiaGlnaGxpZ2h0IjpmYWxzZX0sImhpZ2hsaWdodCI6ZmFsc2V9LHsidHlwZSI6Imdyb3VwIiwiaWQiOiJlbnRyeTIyIiwibGFiZWwiOiJ1cy13ZXN0MSIsIm1lbWJlcnMiOlt7InR5cGUiOiJub2RlIiwiaWQiOiJlbnRyeTIzIiwibGFiZWwiOiJmcm9udGVuZDIiLCJoaWdobGlnaHQiOmZhbHNlfSx7InR5cGUiOiJub2RlIiwiaWQiOiJlbnRyeTI0IiwibGFiZWwiOiJiYWNrZW5kMiIsImhpZ2hsaWdodCI6ZmFsc2V9XSwiaGlnaGxpZ2h0IjpmYWxzZX0seyJ0eXBlIjoibGluayIsImlkIjoiZW50cnk5IiwibGFiZWwiOm51bGwsImZyb20iOnsidHlwZSI6Im5vZGUiLCJpZCI6ImVudHJ5MTAiLCJsYWJlbCI6ImJhY2tlbmQxIiwiaGlnaGxpZ2h0IjpmYWxzZX0sInRvIjp7InR5cGUiOiJub2RlIiwiaWQiOiJlbnRyeTExIiwibGFiZWwiOiJkYXRhYmFzZSIsImhpZ2hsaWdodCI6ZmFsc2V9LCJoaWdobGlnaHQiOmZhbHNlfSx7InR5cGUiOiJsaW5rIiwiaWQiOiJlbnRyeTE1IiwibGFiZWwiOm51bGwsImZyb20iOnsidHlwZSI6Im5vZGUiLCJpZCI6ImVudHJ5MTYiLCJsYWJlbCI6ImJhY2tlbmQyIiwiaGlnaGxpZ2h0IjpmYWxzZX0sInRvIjp7InR5cGUiOiJub2RlIiwiaWQiOiJlbnRyeTE3IiwibGFiZWwiOiJkYXRhYmFzZSIsImhpZ2hsaWdodCI6ZmFsc2V9LCJoaWdobGlnaHQiOmZhbHNlfV0sInNlbGVjdGVkIjoiZW50cnkyOCJ9).

## 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 `?`
1. Delete any other objects you've created by pressing `d`

# Nodes

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

# Links

1. Navigate to the **cloudflare** node
1. Press `space` to highlight the node
1. Navigate to the **frontend1** node
1. Press `space` to highlight the node
1. Press `i` to create a l**i**nk
1. 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
1. Press `d` to delete it
1. Do the same to the **frontend1** standalone node
1. 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
1. Press `space` to highlight the node
1. Press `i` to create a link
1. Navigate to the blank second node in the link
1. Label it **backend1**
1. Note the new node and link in the diagram

# Groups

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

# Labels

1. While in the group sublist, press `a` to create a l**a**bel
1. Set the content to `us-east1`
1. Note the label text on the group in the diagram
1. Navigate to the **cloudflare** -> **frontend1** link sublist  
   Tip: Press `right` or `enter` to move into the sublist
1. Add a label with the content `HTTPS`
1. Note the label text on the link in the diagram
1. Label the **frontend1** -> **backend1** link **gRPC**

# Finishing up

1. Create links:
  1. **cloudflare** -> **frontend2** (labeled **HTTPS**)
  1. **frontend2** -> **backend2** (labeled **gRPC**)
  1. **backend1** -> **database**
  1. **backend2** -> **database**
1. Create groups:
  1. **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.