82 lines
5.1 KiB
Markdown
82 lines
5.1 KiB
Markdown
# 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.
|