With legend on a side and colour-coded circles, we are able to save space while keeping the key focus intact. See how route related keys are grouped together in dark-green circles. They are a combination of functions, objects, boolean values, some only available on either client or server and sometimes both and more! Now imagine if we were to write these key attributes in words! It would clutter the diagram instantly and make it really hard to read.Įarlier we saw how we can use bracket shape to group similar concepts, here’s another example of how we can use colours to do the same. Nuxt Context provides all of these keys that we see in the diagram. (Concept reference: Nuxt-2 route middleware)Ĭonsider this example of Nuxt-2 Context which presents a perfect use-case for adding a legend section. Seeing the shape, our minds will immediately look for that additional meaning that there are three types of route middleware to begin with and how they differ from each other and their use-cases. I have used multiple document shape👇 to indicate that Global and Layout middleware can affect more than one routes while Page middleware can be applied to one page at a time.
So, we are going to borrow some of the suitable shapes and bring them into a conceptual diagram.įor example, it’s possible to show when we want to refer to a single file versus multiple files. We all have seen flowcharts and know what flowchart shapes look like. That is where we will take help from the flowchart notation symbols. But if we consider context and add a little bit of creativity, we will find other ways to illustrate ideas out of the box. You can see how concepts are often presented in rectangular shapes. The diagram is trying to show the possible values of :is=“…” prop that it can be either Checkbox, TextArea, InputText or Radio component. Green boxes indicate known components, and orange ones are supposed to be rendered dynamically by. As an author, you have to attach relevant meanings to these specially presented shapes.Īlso, the diagram uses two colours: green and orange. Boxes can be of a solid, dotted or dashed border.
In the context of this example, the dotted line is used to indicate reusable components.
0 kommentar(er)
