# 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)
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**