feat (model): component model with plantuml

santanche · Sep 28, 2024 · c4fb43d · c4fb43d
1 parent 1f0c3ab
commit c4fb43d
Show file tree

Hide file tree

Showing 9 changed files with 207 additions and 0 deletions.
diff --git a/model/README.md b/model/README.md
@@ -0,0 +1,22 @@
+# Modeling Tools
+
+## PlantUML
+https://plantuml.com/
+
+PlantUML is a tool that allows you to create UML diagrams from a simple textual description. It is used to create diagrams like sequence diagrams, use case diagrams, class diagrams, activity diagrams, component diagrams, state diagrams, object diagrams, and deployment diagrams.
+
+[Full Documentation](https://pdf.plantuml.net/PlantUML_Language_Reference_Guide_en.pdf)
+
+### Component Diagrams
+https://plantuml.com/component-diagram
+
+#### Required Interfaces
+
+* [Summary of Required Interfaces](https://stackoverflow.com/questions/55077828/using-required-provided-interfaces-in-component-diagrams-plantuml)
+
+* Additional details at:
+[Deployment Diagrams](https://plantuml.com/deployment-diagram)
+
+#### Extra Examples
+
+[Real World PlantUML](https://real-world-plantuml.com/?type=component)
diff --git a/model/basics/components.iuml b/model/basics/components.iuml
@@ -0,0 +1,3 @@
+!procedure $property($name)
+  portout $name
+!endprocedure
diff --git a/model/basics/step-by-step.ipynb b/model/basics/step-by-step.ipynb
@@ -0,0 +1,127 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "id": "27ce02ea-d456-4eb3-860c-64eb8665e250",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import iplantuml"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "0eb0897e-edac-4370-bb72-97c73d0ce885",
+   "metadata": {},
+   "source": [
+    "# Step 1 - Components"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "4bc559a1-f44b-4ed8-a633-33f5ca1273b6",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Writing output for /home/santanche/git/component2learn/model/basics/2eb61326-d47f-4210-9dc0-f7f37caa4d3f.uml to 2eb61326-d47f-4210-9dc0-f7f37caa4d3f.svg\n"
+     ]
+    },
+    {
+     "data": {
+      "image/svg+xml": [
+       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" contentStyleType=\"text/css\" height=\"59px\" preserveAspectRatio=\"none\" style=\"width:243px;height:59px;background:#FFFFFF;\" version=\"1.1\" viewBox=\"0 0 243 59\" width=\"243px\" zoomAndPan=\"magnify\"><defs/><g><!--entity Table--><g id=\"elem_Table\"><rect fill=\"#F1F1F1\" height=\"46.2969\" rx=\"2.5\" ry=\"2.5\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"78.5205\" x=\"7\" y=\"7\"/><rect fill=\"#F1F1F1\" height=\"10\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"15\" x=\"65.5205\" y=\"12\"/><rect fill=\"#F1F1F1\" height=\"2\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"4\" x=\"63.5205\" y=\"14\"/><rect fill=\"#F1F1F1\" height=\"2\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"4\" x=\"63.5205\" y=\"18\"/><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"14\" lengthAdjust=\"spacing\" textLength=\"38.5205\" x=\"22\" y=\"39.9951\">Table</text></g><!--entity ScatterPlot--><g id=\"elem_ScatterPlot\"><rect fill=\"#F1F1F1\" height=\"46.2969\" rx=\"2.5\" ry=\"2.5\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"116.8975\" x=\"120.81\" y=\"7\"/><rect fill=\"#F1F1F1\" height=\"10\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"15\" x=\"217.7075\" y=\"12\"/><rect fill=\"#F1F1F1\" height=\"2\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"4\" x=\"215.7075\" y=\"14\"/><rect fill=\"#F1F1F1\" height=\"2\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"4\" x=\"215.7075\" y=\"18\"/><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"14\" lengthAdjust=\"spacing\" textLength=\"76.8975\" x=\"135.81\" y=\"39.9951\">ScatterPlot</text></g><!--SRC=[Ymv9JCf9ZUMA3avEB2b9BGh8oI-91G00]--></g></svg>"
+      ],
+      "text/plain": [
+       "<IPython.core.display.SVG object>"
+      ]
+     },
+     "execution_count": 5,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "%%plantuml\n",
+    "\n",
+    "@startuml\n",
+    "\n",
+    "[Table]\n",
+    "[ScatterPlot]\n",
+    "\n",
+    "@enduml"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "id": "2192dabb-c879-4863-bb9e-3b70d0a856e3",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Writing output for /home/santanche/git/component2learn/model/basics/94315c6d-128c-49d2-a64d-d7d262251ddd.uml to 94315c6d-128c-49d2-a64d-d7d262251ddd.svg\n"
+     ]
+    },
+    {
+     "data": {
+      "image/svg+xml": [
+       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" contentStyleType=\"text/css\" height=\"68px\" preserveAspectRatio=\"none\" style=\"width:295px;height:68px;background:#FFFFFF;\" version=\"1.1\" viewBox=\"0 0 295 68\" width=\"295px\" zoomAndPan=\"magnify\"><defs/><g><!--entity Table--><g id=\"elem_Table\"><rect fill=\"#F1F1F1\" height=\"46.2969\" rx=\"2.5\" ry=\"2.5\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"78.5205\" x=\"7\" y=\"7\"/><rect fill=\"#F1F1F1\" height=\"10\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"15\" x=\"65.5205\" y=\"12\"/><rect fill=\"#F1F1F1\" height=\"2\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"4\" x=\"63.5205\" y=\"14\"/><rect fill=\"#F1F1F1\" height=\"2\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"4\" x=\"63.5205\" y=\"18\"/><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"14\" lengthAdjust=\"spacing\" textLength=\"38.5205\" x=\"22\" y=\"39.9951\">Table</text></g><!--entity DataFlow--><g id=\"elem_DataFlow\"><ellipse cx=\"129.26\" cy=\"30.15\" fill=\"#F1F1F1\" rx=\"8\" ry=\"8\" style=\"stroke:#181818;stroke-width:0.5;\"/><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"14\" lengthAdjust=\"spacing\" textLength=\"65.3857\" x=\"96.5671\" y=\"60.1451\">DataFlow</text></g><!--entity ScatterPlot--><g id=\"elem_ScatterPlot\"><rect fill=\"#F1F1F1\" height=\"46.2969\" rx=\"2.5\" ry=\"2.5\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"116.8975\" x=\"172.81\" y=\"7\"/><rect fill=\"#F1F1F1\" height=\"10\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"15\" x=\"269.7075\" y=\"12\"/><rect fill=\"#F1F1F1\" height=\"2\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"4\" x=\"267.7075\" y=\"14\"/><rect fill=\"#F1F1F1\" height=\"2\" style=\"stroke:#181818;stroke-width:0.5;\" width=\"4\" x=\"267.7075\" y=\"18\"/><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"14\" lengthAdjust=\"spacing\" textLength=\"76.8975\" x=\"187.81\" y=\"39.9951\">ScatterPlot</text></g><!--link Table to DataFlow--><g id=\"link_Table_DataFlow\"><path d=\"M85.81,30.15 C97.24,30.15 98.67,30.15 110.1,30.15 \" fill=\"none\" id=\"Table-to-DataFlow\" style=\"stroke:#181818;stroke-width:1.0;\"/><path d=\"M117.0218,21.6928 A9,9 0 0 0 117.0218 38.6072\" fill=\"none\" style=\"stroke:#181818;stroke-width:1.5;\"/></g><!--link DataFlow to ScatterPlot--><g id=\"link_DataFlow_ScatterPlot\"><path d=\"M138.42,30.15 C149.79,30.15 161.15,30.15 172.51,30.15 \" fill=\"none\" id=\"DataFlow-ScatterPlot\" style=\"stroke:#181818;stroke-width:1.0;\"/></g><!--SRC=[Ymv9JCf9ZLNGrL1mIIn9TCl9B-U2CHHq5QA3anDBIbAB0dBoIs81]--></g></svg>"
+      ],
+      "text/plain": [
+       "<IPython.core.display.SVG object>"
+      ]
+     },
+     "execution_count": 6,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "%%plantuml\n",
+    "\n",
+    "@startuml\n",
+    "\n",
+    "[Table] -( DataFlow\n",
+    "DataFlow - [ScatterPlot]\n",
+    "\n",
+    "@enduml"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "1c4ebaef-1c49-4c40-b3dd-e1164675431f",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.12"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/model/basics/step01-1.wsd b/model/basics/step01-1.wsd
@@ -0,0 +1,6 @@
+@startuml
+
+[Table]
+[ScatterPlot]
+
+@enduml
diff --git a/model/basics/step01-2.wsd b/model/basics/step01-2.wsd
@@ -0,0 +1,6 @@
+@startuml
+
+component Table
+component ScatterPlot
+
+@enduml
diff --git a/model/basics/step02.wsd b/model/basics/step02.wsd
@@ -0,0 +1,6 @@
+@startuml
+
+[Table] -( DataFlow
+DataFlow - [ScatterPlot]
+
+@enduml
diff --git a/model/basics/step03.wsd b/model/basics/step03.wsd
@@ -0,0 +1,17 @@
+@startuml
+
+!include components.iuml
+
+component Table {
+    $property(file_path)
+}
+[Table] -( DataFlow
+
+component ScatterPlot {
+    $property(xfield)
+    $property(yfield)
+    $property(title)
+}
+DataFlow - [ScatterPlot]
+
+@enduml
diff --git a/model/web/hierarchical.wsd b/model/web/hierarchical.wsd
@@ -0,0 +1,8 @@
+@startuml
+
+component PacientList {
+  [Pesquisa] -[hidden]-> [PatientItem <<NavigationItem>>]
+  [PatientItem <<NavigationItem>>] -[hidden]-> [button]
+}
+
+@enduml
diff --git a/model/web/web-model.md b/model/web/web-model.md
@@ -0,0 +1,12 @@
+# Modelo de Feridas
+
+~~~plantuml
+component PacientList {
+  [Pesquisa] -[hidden]-> [PatientItem <<NavigationItem>>]
+  [PatientItem <<NavigationItem>>] -[hidden]-> [button]
+}
+~~~
+
+* Como especificaremos que um componente nosso especializa outro do shadcn?
+* Como reduzir os nomes do shadcn na implementação?
+