changed the look and feel and worked on teh networking diagram.

CLI/Controllers/TopologyController.cs

@@ -10,7 +10,15 @@ public class TopologyController: ControllerBase
         [HttpGet("/api/topology")]
         public IActionResult GetTopology()
         {
-            var topology = Project.Current?.GetTopology();
+            var topology = Project.Current?.GetTopology(true);
+            if (topology is null) return NoContent();
+            else return Ok(topology);
+        }
+
+        [HttpGet("/api/topology/modules")]
+        public IActionResult GetTopologyModules()
+        {
+            var topology = Project.Current?.GetTopology(false);
             if (topology is null) return NoContent();
             else return Ok(topology);
         }

CLI/Project.Network.cs

@@ -9,7 +9,7 @@ namespace CLI
 {
     public partial class Project
     {
-        public Topology GetTopology()
+        public Topology GetTopology(bool includeDetails)
         {
             var nodes = new List<TopologyNode>();
             var edges = new List<TopologyEdge>();
@@ -27,18 +27,18 @@ public Topology GetTopology()
                         {
                             Arrows = "to"
                         });
-                    } else if (node is ASTType)
+                    } else if (includeDetails && node is ASTType)
                     {
                         var _type = ((ASTType)node);
                         var _id = $"{m.Name}.{_type.Name}";
                         nodes.Add(new TopologyNode(_id, _type.Name));
                         edges.Add(new TopologyEdge(moduleName, _id, ""));
-                    } else if (node is ASTAlias alias)
+                    } else if (includeDetails && node is ASTAlias alias)
                     {
                         var _id = $"{m.Name}.{alias.Name}";
                         nodes.Add(new TopologyNode(_id, alias.Name, new TopologyColor("#0096a0")));
                         edges.Add(new TopologyEdge(moduleName, _id, ""));
-                    } else if (node is ASTData data)
+                    } else if (includeDetails && node is ASTData data)
                     {
                         var _id = $"{m.Name}.{data.Name}";
                         nodes.Add(new TopologyNode(_id, data.Name, new TopologyColor("#fef6e1")));

CLI/wwwroot/global.css

@@ -40,6 +40,9 @@ h1.title {
     .nav-button:hover {
         cursor: pointer;
     }
+p {
+    text-align: justify;
+}
 
 
 
@@ -142,9 +145,6 @@ form button {
     color: hotpink;
 }
 
-.codeflask {
-    width: calc(100% - 2rem)!important;
-}
 
 
 /*

docs/common_usecases_logical_data_model.md → docs/common_usecases_01_logical_data_model.md

@@ -6,7 +6,7 @@ pre {
 
 # Common Use Cases
 
-This chapter will focus on solving common use cases when modeling your information. Allong the way
+These chapters will focus on solving common use cases when modeling your information. Allong the way
 we'll look at how to evolve a model form a purely logical data model to an implementation model.
 
 ## Conceptual models
@@ -63,9 +63,12 @@ There are a few things to notice:
 ## Evolving your information
 
 Now that we have definitions of our core concepts we can start dicecting the text we've written to
-figure out the "Peripherals". There are many ways of going about finding these entities. The best
-idea, in our opinion, is doing interviews with subject matter experts and distilling the most used
-_nouns_. We recommend making the most used nouns bold so that they stick out in text.
+figure out the "Peripherals". "Peripherals" are entities which did not start our exploration into
+the subject matter but are important enough to clarify and describe. There are many ways of going
+about finding these peripheral entities.
+
+The best idea, in our opinion, is doing interviews with subject matter experts and distilling the
+most used _nouns_. We recommend making the most used nouns bold so that they stick out in text.
 
 > Markdown: surrounding a selection of words with two '\*\*' will make the selection **bold**.
 
@@ -74,14 +77,22 @@ For example, in the Teacher section we would mark it up like:
 ```
 ## Teacher
 
-A teacher (also called a \*\*school\*\* \*\*teacher\*\* or, in some contexts, an educator) is a **person** who helps \*\*students\*\* to acquire knowledge or competence.
+A teacher (also called a \*\*school teacher\*\* or, in some contexts, an educator) is a **person** who helps \*\*students\*\* to acquire knowledge or competence.
 
 type Teacher
 ```
 
+This text would look something like:
+
+A teacher (also called a \*\*school teacher\*\* or, in some contexts, an educator) is a **person**
+who helps \*\*students\*\* to acquire knowledge or competence.
+
+When rendered on the actual page.
+
 As you can see we've ignored terms like _educator_, _knowledge_ and _competence_. Try and keep the
-number of entites you want to describe as small as possible. After parsing all of the text and
-taking the most important nouns out of the text we'll end up with something like:
+number of entites you want to describe as small as possible, but still enough to clarify your
+domain. After parsing all of the text and taking the most important nouns out of the text we'll end
+up with something like:
 
 ```
 # School Model
@@ -128,6 +139,16 @@ type Course
 
 ```
 
+### Recap
+
+We've started with the main (root) entities of our domain and wrote small elaboratory paragraphs
+detailing their use and giving them context.
+
+From these descriptions we've distilled peripheral entities which bring our main entities to life.
+We mark these entites bold so that everyone can see why they are entities in our logical model.
+
+We now have a great conceptual model which can now evolve to a logical model!
+
 ## Adding Cardinality
 
 Now that we have the main components of our conceptional model we can start thinking about the next
@@ -184,4 +205,43 @@ After creating the relationships between the different models we end up with som
 <img src="./assets/SchoolModel01.png" />
 </div>
 
+### Recap
+
+Cardinality is the relation between entities. In ZDragon we have the following ways of describing a
+relationship:
+
+#### One to One (1..1)
+
+```
+type Address
+type Person =
+    HomeAddress: Address;
+```
+
+#### Zero to One (0..1)
+
+```
+type Address
+type Person =
+    BillingAddress: Maybe Address;
+```
+
+#### Zero to many (0..\*)
+
+```
+type Person =
+    Tags: List String;
+```
+
+#### One to many (1..\*)
+
+```
+type Person =
+    Tags: List String
+        & min 1
+    ;
+```
+
+## Final Result Example
+
 [final result](./assets/School.car)

docs/common_usecases_02_reuse_import.md

@@ -0,0 +1,5 @@
+# The road so far
+
+In the previous chapter we saw how we could create a logical data model from a well defined business
+definition. In this chapter we will focus on the basis of reuse. Reuse is important if you want to
+eventually want to create useful implementation models.

docs/index.md

@@ -34,7 +34,7 @@ lets you write down your thought and it will spit out models and diagrams.
 
 These links are designed to help you understand and create ZDragon models:
 
-- [Common Usecases 01 - Logical Data Models](./common_usecases_logical_data_model.md)
+- [Common Usecases 01 - Logical Data Models](./common_usecases_01_logical_data_model.md)
 
 ## Roadmap
 

web/src/Editor.svelte

@@ -124,7 +124,7 @@
   }
   .editor-container,
   #editor {
-    width: 700px;
+    /* width: 700px; */
     height: calc(100% - 4rem);
   }
 
@@ -155,7 +155,7 @@
 <div class="editor-container">
   <div id="editor" />
 </div>
-<!-- 
+
 {#if errors && errors.length > 0}
   <div class="errors">
     {#each errors as error}
@@ -165,7 +165,7 @@
       </div>
     {/each}
   </div>
-{/if} -->
+{/if}
 <!-- 
 {#if showPreview}
   <div class="preview">

web/src/ModuleTopology.svelte

@@ -1,5 +1,6 @@
 <script>
   import navigator from "./navigator.js";
+
   var options = {
     interaction: {
       dragNodes: false,
@@ -9,8 +10,9 @@
       enabled: false
     }
   };
-  var getData = async () => {
-    var response = await fetch("/api/topology");
+  var getData = async e => {
+    var url = e ? "/api/topology" : "/api/topology/modules";
+    var response = await fetch(url);
     var topology = await response.json();
     var container = document.getElementById("topology");
     var network = new vis.Network(container, topology, options);
@@ -23,7 +25,7 @@
       }
     });
   };
-  getData();
+  getData(false);
 </script>
 
 <style>
@@ -36,8 +38,23 @@
   #topology > *:focus {
     outline: none !important;
   }
+  .options-form {
+    position: fixed;
+    right: 10px;
+    bottom: 10px;
+  }
 </style>
 
 <div class="topology">
   <div id="topology" />
+  <div class="options-form">
+    <div class="form-field">
+      <label>Include Details</label>
+      <input
+        type="checkbox"
+        on:change={e => {
+          getData(e.target.checked);
+        }} />
+    </div>
+  </div>
 </div>

web/src/Preview.svelte

@@ -8,9 +8,13 @@
     height: calc(100% - 60px);
   }
   iframe {
-    width: 100%;
     height: 100%;
+    width: 23cm;
+    padding: 0 1cm;
     border: none;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
   }
 </style>