slides-06-types-non-uml.fr.md

Types de diagrammes Non-UML

Types de diagrammes - Entity Relationship

Une extension des diagrammes de classes permettant de faire de la schématisation DB.

@startuml
skinparam linetype ortho

entity "Class" as e_class {
  *class_id : number <<generated>>
  --
  *name : text
}

entity "Student" as e_student {
  *student_id : number <<generated>>
  --
  class_id : number <<FK>>
  phone_number : text
}

entity "Teacher" as e_teacher {
  *teacher_id : number <<generated>>
  --
  *class_id : number <<FK>>
  other_details : text
}

e_class }|..o{ e_student: includes / goes to
e_class ||..o{ e_teacher: is taught / teaches
e_student }|..|{ e_teacher: has
@enduml

• Plus de détails: PlantUML - Entity Relationship

Types de diagrammes - Mind Map

@startmindmap
+ OS
++ Ubuntu
+++ Linux Mint
+++ Kubuntu
+++ Lubuntu
+++ KDE Neon
++ LMDE
++ SolydXK
++ SteamOS
++ Raspbian
-- Windows 95
-- Windows 98
-- Windows NT
--- Windows 8
--- Windows 10
@endmindmap

• Plus de détails: PlantUML - MindMap

Types de diagrammes - Gantt

Pour Cédric et autre gestionnaires:

@startgantt
[Prototype design] lasts 13 days and is colored in Lavender/LightBlue
[Test prototype] lasts 9 days and is colored in Coral/Green and starts 3 days after [Prototype design]'s end
[Write tests] lasts 5 days and ends at [Prototype design]'s end
[Hire tests writers] lasts 6 days and ends at [Write tests]'s start
[Init and write tests report] is colored in Coral/Green
[Init and write tests report] starts 1 day before [Test prototype]'s start and ends at [Test prototype]'s end
@endgantt

• Plus de détails: PlantUML - Gantt

Types de diagrammes - WBS

@startwbs
+ New Job
++ Decide on Job Requirements
+++ Identity gaps
+++ Review JDs
++++ Sign-Up for courses
++++ Volunteer
++++ Reading
++- Checklist
+++- Responsibilities
+++- Location
++ CV Upload Done
+++ CV Updated
++++ Spelling & Grammar
++++ Check dates
---- Skills
+++ Recruitment sites chosen
@endwbs

• Plus de détails: PlantUML - Work Breakdown Structure

Types de diagrammes - GUI Mock

Via Salt, on peut même faire du design d'interfaces graphique!

@startsalt
{+
{* File | Edit | Source | Refactor 
 Refactor | New | Open File | - | Close | Close All }
{/ General | Fullscreen | Behavior | Saving }
{
	{ Open image in: | ^Smart Mode^ }
	[X] Smooth images when zoomed
	[X] Confirm image deletion
	[ ] Show hidden images 
}
[Close]
}
@endsalt

Types de diagrammes - GUI State machine

Un autre example vraiment très intéressant permettant d'inclure Salt à même un diagramme d'état. Je ne montrerai pas le code puisque trop long, mais voici tout de même le résultat:

@startuml
(*) --> "
{{
salt
{+
<b>an example
choose one option
()one
()two
[ok]
}
}}
" as choose
 
choose -right-> "
{{
salt
{+
<b>please wait
operation in progress
<&clock>
[cancel]
}
}}
" as wait
wait -right-> "
{{
salt
{+
<b>success
congratulations!
[ok]
}
}}
" as success
 
wait -down-> "
{{
salt
{+
<b>error
failed, sorry
[ok]
}
}}
"
@enduml

• Plus de détails: PlantUML - Salt

Types de diagrammes - Dot

Puisque PlantUML dépend déjà de Graphviz, un support du language dot est offert.

@startdot
digraph foo {
  node [style=rounded]
  node1 [shape=box]
  node2 [fillcolor=yellow, style="rounded,filled", shape=diamond]
  node3 [shape=record, label="{ a | b | c }"]

  node1 -> node2 -> node3
}
@enddot

• Plus de détails: PlantUML - PlantUML - Dot

Types de diagrammes - Ditaa

Le diagram parfait pour les artistes ASCII. Via outil ditaa installable et utilisable séparément.

@startditaa
+--------+   +-------+    +-------+
|        +---+ ditaa +--> |       |
|  Text  |   +-------+    |diagram|
|Document|   |!magic!|    |       |
|     {d}|   |       |    |       |
+---+----+   +-------+    +-------+
	:                         ^
	|       Lots of work      |
	+-------------------------+
@endditaa

• Plus de détails: PlantUML - Ditaa