<!
DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Diagrammes UML Classe et Objet corrigés - Souspréfecture</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
background: #fafafa;
color: #222;
}
h1, h2 {
text-align: center;
font-weight: bold;
color: #2c3e50;
margin-bottom: 10px;
}
.diagram-section {
margin: 40px auto;
display: flex;
justify-content: center;
}
svg {
background: white;
width: 900px;
height: 620px;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
border: 1px solid #ddd;
}
/* Styles diagramme de classe */
.class-box {
fill: #2980b9;
stroke: #21639a;
stroke-width: 2;
rx: 10;
ry: 10;
}
.class-header {
fill: #1c5aa6;
stroke: #133f71;
stroke-width: 2;
}
.class-title {
fill: #ecf0f1;
font-size: 18px;
font-weight: 700;
user-select: none;
}
.class-attrs {
fill: #f7f9fb;
font-size: 14px;
fill: #f0f3f7;
user-select: none;
white-space: pre;
}
.association-line {
stroke: #34495e;
stroke-width: 2;
marker-end: url(#arrowhead);
}
.association-label {
fill: #34495e;
font-size: 14px;
font-weight: 600;
user-select: none;
}
/* Style diagramme d'objet */
.obj-box {
fill: #f39c12;
stroke: #b97703;
stroke-width: 2;
rx: 10;
ry: 10;
}
.obj-header {
fill: #d87e04;
stroke: #9c5a01;
stroke-width: 2;
}
.obj-title {
fill: #fff3cf;
font-weight: 700;
font-size: 17px;
user-select: none;
}
.obj-attrs {
fill: #fff7dc;
font-size: 14px;
fill: #5c3e00;
font-weight: 600;
user-select: none;
white-space: pre;
}
.obj-link {
stroke: #b97703;
stroke-width: 2;
marker-end: url(#arrowhead-obj);
}
</style>
</head>
<body>
<h1>Diagrammes UML de Classe et d’Objet corrigés</h1>
<h2>Diagramme de Classe</h2>
<div class="diagram-section">
<svg viewBox="0 0 900 620" role="img" aria-label="Diagramme de classe UML corrigé">
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5"
orient="auto" fill="#34495e">
<polygon points="0 0, 10 3.5, 0 7"/>
</marker>
</defs>
<!-- Classe Souspréfecture -->
<rect x="50" y="50" width="230" height="140" class="class-box"/>
<rect x="50" y="50" width="230" height="45" class="class-header"/>
<text x="165" y="80" class="class-title" text-anchor="middle" dominant-
baseline="middle">Souspréfecture</text>
<text x="60" y="105" class="class-attrs">- id : int</text>
<text x="60" y="130" class="class-attrs">- nom : string</text>
<text x="60" y="155" class="class-attrs">- adresse : string</text>
<text x="60" y="180" class="class-attrs">- téléphone : string</text>
<!-- Classe Citoyenne -->
<rect x="50" y="250" width="230" height="170" class="class-box"/>
<rect x="50" y="250" width="230" height="45" class="class-header"/>
<text x="165" y="280" class="class-title" text-anchor="middle" dominant-
baseline="middle">Citoyenne</text>
<text x="60" y="310" class="class-attrs">- id : int</text>
<text x="60" y="335" class="class-attrs">- nom : string</text>
<text x="60" y="360" class="class-attrs">- prénom : string</text>
<text x="60" y="385" class="class-attrs">- email : string</text>
<text x="60" y="410" class="class-attrs">- téléphone : string</text>
<!-- Classe Service -->
<rect x="400" y="50" width="240" height="160" class="class-box"/>
<rect x="400" y="50" width="240" height="45" class="class-header"/>
<text x="520" y="80" class="class-title" text-anchor="middle" dominant-
baseline="middle">Service</text>
<text x="410" y="105" class="class-attrs">
- id : int
- nom : string
- description : string
- durée : int (minutes)
</text>
<!-- Classe Rendez-vous -->
<rect x="400" y="270" width="240" height="170" class="class-box"/>
<rect x="400" y="270" width="240" height="45" class="class-header"/>
<text x="520" y="300" class="class-title" text-anchor="middle" dominant-
baseline="middle">Rendez-vous</text>
<text x="410" y="330" class="class-attrs">
- id : int
- date : Date
- heure : Time
- statut : string
- remarque : string
</text>
<!-- Associations -->
<!-- Souspréfecture -->
<line x1="280" y1="110" x2="400" y2="110" class="association-line" marker-
end="url(#arrowhead)"/>
<text x="340" y="95" class="association-label" text-anchor="middle">1</text>
<text x="340" y="125" class="association-label"
text-anchor="middle">fournit</text>
<text x="340" y="140" class="association-label" text-anchor="middle">0..*</text>
<!-- Citoyenne -->
<line x1="280" y1="350" x2="400" y2="350" class="association-line" marker-
end="url(#arrowhead)"/>
<text x="340" y="335" class="association-label" text-anchor="middle">1</text>
<text x="340" y="365" class="association-label" text-anchor="middle">prend</text>
<text x="340" y="380" class="association-label" text-anchor="middle">0..*</text>
<!-- Relation entre Service et Rendez-vous améliorée -->
<line x1="520" y1="210" x2="520" y2="270" class="association-line" marker-
end="url(#arrowhead)"/>
<text x="540" y="240" class="association-label" style="transform: rotate(-90deg);
transform-origin: 540px 240px;" text-anchor="middle">
Est lié à
</text>
<text x="540" y="255" class="association-label" style="transform: rotate(-90deg);
transform-origin: 540px 255px;" text-anchor="middle">
un rendez-vous
</text>
<text x="555" y="220" class="association-label" style="transform: rotate(-90deg);
transform-origin: 555px 220px;" text-anchor="middle">
1
</text>
<text x="555" y="290" class="association-label" style="transform: rotate(-90deg);
transform-origin: 555px 290px;" text-anchor="middle">
0..*
</text>
</svg>
</div>
<h2>Diagramme d’Objet (Exemple d’instances clarifié)</h2>
<div class="diagram-section">
<svg viewBox="0 0 900 620" role="img" aria-label="Diagramme d'objet UML clarifié">
<defs>
<marker id="arrowhead-obj" markerWidth="10" markerHeight="7" refX="10"
refY="3.5" orient="auto" fill="#b97703">
<polygon points="0 0, 10 3.5, 0 7"/>
</marker>
</defs>
<!-- Objet Souspréfecture -->
<rect x="50" y="50" width="260" height="150" class="obj-box"/>
<rect x="50" y="50" width="260" height="45" class="obj-header"/>
<text x="180" y="80" class="obj-title" text-anchor="middle" dominant-
baseline="middle">Souspréfecture1</text>
<text x="60" y="105" class="obj-attrs">id = 1</text>
<text x="60" y="130" class="obj-attrs">nom = "Sous-préfecture Paris"</text>
<text x="60" y="155" class="obj-attrs">adresse = "10 Rue de la Paix"</text>
<text x="60" y="180" class="obj-attrs">téléphone = "01 23 45 67 89"</text>
<!-- Objet Citoyenne -->
<rect x="50" y="270" width="260" height="180" class="obj-box"/>
<rect x="50" y="270" width="260" height="45" class="obj-header"/>
<text x="180" y="300" class="obj-title" text-anchor="middle" dominant-
baseline="middle">Citoyenne1</text>
<text x="60" y="335" class="obj-attrs">id = 101</text>
<text x="60" y="360" class="obj-attrs">nom = "Dubois"</text>
<text x="60" y="385" class="obj-attrs">prénom = "Sophie"</text>
<text x="60" y="410" class="obj-attrs">email = "sophie.d@[Link]"</text>
<text x="60" y="435" class="obj-attrs">téléphone = "06 12 34 56 78"</text>
<!-- Objet Service -->
<rect x="520" y="50" width="260" height="160" class="obj-box"/>
<rect x="520" y="50" width="260" height="45" class="obj-header"/>
<text x="650" y="80" class="obj-title" text-anchor="middle" dominant-
baseline="middle">Service1</text>
<text x="530" y="105" class="obj-attrs">id = 201</text>
<text x="530" y="130" class="obj-attrs">nom = "Carte d’identité"</text>
<text x="530" y="155" class="obj-attrs">description = "Renouvellement"</text>
<text x="530" y="180" class="obj-attrs">durée = 30</text>
<!-- Objet RendezVous -->
<rect x="520" y="270" width="260" height="180" class="obj-box"/>
<rect x="520" y="270" width="260" height="45" class="obj-header"/>
<text x="650" y="300" class="obj-title" text-anchor="middle" dominant-
baseline="middle">RendezVous1</text>
<text x="530" y="335" class="obj-attrs">id = 301</text>
<text x="530" y="360" class="obj-attrs">date = "2024-09-05"</text>
<text x="530" y="385" class="obj-attrs">heure = "10:45"</text>
<text x="530" y="410" class="obj-attrs">statut = "Confirmé"</text>
<text x="530" y="435" class="obj-attrs">remarque = "Aucun"</text>
<!-- Relations avec liens fléchés -->
<!-- Souspréfecture fournit Service -->
<line x1="310" y1="110" x2="520" y2="110" class="obj-link" marker-
end="url(#arrowhead-obj)"/>
<text x="415" y="100" class="association-label" fill="#b97703" user-select="none"
font-weight="700" text-anchor="middle">fournit</text>
<!-- Citoyenne prend Rendez-vous -->
<line x1="310" y1="350" x2="520" y2="350" class="obj-link" marker-
end="url(#arrowhead-obj)"/>
<text x="415" y="340" class="association-label" fill="#b97703" user-select="none"
font-weight="700" text-anchor="middle">prend</text>
<!-- Service lié à Rendez-vous -->
<line x1="650" y1="210" x2="650" y2="270" class="obj-link" marker-
end="url(#arrowhead-obj)"/>
<text x="670" y="240" class="association-label" fill="#b97703" user-select="none"
font-weight="700" text-anchor="middle" style="writing-mode: vertical-rl; text-
orientation: upright;">
est lié à un
</text>
<text x="690" y="240" class="association-label" fill="#b97703" user-select="none"
font-weight="700" text-anchor="middle" style="writing-mode: vertical-rl; text-
orientation: upright;">
rendez-vous
</text>
</svg>
</div>
</body>
</html>