47 lines
3.9 KiB
Markdown
47 lines
3.9 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)
|
|
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**
|