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
Start tutorial 2019-07-12 21:31:24 +00:00			`# Architype Tutorial`

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

			`## Start clean`

Fix lists 2019-07-12 21:33:14 +00:00			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`.
Start tutorial 2019-07-12 21:31:24 +00:00
			`# Nodes`

Fix lists 2019-07-12 21:33:14 +00:00			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`