https://pastein.ru/t/EIy
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UML Диаграммы — Сады</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #f0f2f5;
font-family: 'Inter', sans-serif;
padding: 32px;
color: #1a1a1a;
}
h2 {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
color: #1a1a1a;
padding-left: 4px;
}
.diagram-wrap {
background: white;
border: 1px solid #d0d5dd;
border-radius: 12px;
padding: 32px;
margin-bottom: 40px;
overflow-x: auto;
}
svg text { font-family: 'Inter', sans-serif; }
</style>
</head>
<body>
<h2>Диаграмма вариантов использования (Use Case Diagram)</h2>
<div class="diagram-wrap">
<svg viewBox="0 0 900 500" width="100%" style="min-width:700px; display:block;">
<!-- Граница системы -->
<rect x="180" y="30" width="560" height="440" rx="6"
fill="#fafbfc" stroke="#888" stroke-width="1.5" stroke-dasharray="8,4"/>
<text x="460" y="22" text-anchor="middle" font-size="13" fill="#555" font-style="italic">Система управления садами</text>
<!-- ===== АКТЁР 1: Садовод ===== -->
<!-- голова -->
<circle cx="70" cy="80" r="18" fill="white" stroke="#333" stroke-width="1.5"/>
<!-- тело -->
<line x1="70" y1="98" x2="70" y2="145" stroke="#333" stroke-width="1.5"/>
<!-- руки -->
<line x1="40" y1="118" x2="100" y2="118" stroke="#333" stroke-width="1.5"/>
<!-- ноги -->
<line x1="70" y1="145" x2="50" y2="175" stroke="#333" stroke-width="1.5"/>
<line x1="70" y1="145" x2="90" y2="175" stroke="#333" stroke-width="1.5"/>
<text x="70" y="193" text-anchor="middle" font-size="13" font-weight="500" fill="#1a1a1a">Садовод</text>
<text x="70" y="208" text-anchor="middle" font-size="11" fill="#666">(наследник)</text>
<!-- ===== АКТЁР 2: Аналитик ===== -->
<circle cx="70" cy="320" r="18" fill="white" stroke="#333" stroke-width="1.5"/>
<line x1="70" y1="338" x2="70" y2="385" stroke="#333" stroke-width="1.5"/>
<line x1="40" y1="358" x2="100" y2="358" stroke="#333" stroke-width="1.5"/>
<line x1="70" y1="385" x2="50" y2="415" stroke="#333" stroke-width="1.5"/>
<line x1="70" y1="385" x2="90" y2="415" stroke="#333" stroke-width="1.5"/>
<text x="70" y="433" text-anchor="middle" font-size="13" font-weight="500" fill="#1a1a1a">Аналитик</text>
<!-- ===== USE CASES (овалы) ===== -->
<!-- UC1 -->
<ellipse cx="370" cy="80" rx="130" ry="26" fill="#EBF5FB" stroke="#2E86C1" stroke-width="1.5"/>
<text x="370" y="77" text-anchor="middle" font-size="12" fill="#1a1a1a">Зарегистрировать</text>
<text x="370" y="91" text-anchor="middle" font-size="12" fill="#1a1a1a">новое дерево</text>
<!-- UC2 -->
<ellipse cx="370" cy="160" rx="130" ry="26" fill="#EBF5FB" stroke="#2E86C1" stroke-width="1.5"/>
<text x="370" y="157" text-anchor="middle" font-size="12" fill="#1a1a1a">Зафиксировать</text>
<text x="370" y="171" text-anchor="middle" font-size="12" fill="#1a1a1a">гибель дерева</text>
<!-- UC3 -->
<ellipse cx="370" cy="240" rx="130" ry="26" fill="#EBF5FB" stroke="#2E86C1" stroke-width="1.5"/>
<text x="370" y="237" text-anchor="middle" font-size="12" fill="#1a1a1a">Посадить новое</text>
<text x="370" y="251" text-anchor="middle" font-size="12" fill="#1a1a1a">дерево</text>
<!-- UC4 -->
<ellipse cx="370" cy="320" rx="130" ry="26" fill="#EBF5FB" stroke="#2E86C1" stroke-width="1.5"/>
<text x="370" y="317" text-anchor="middle" font-size="12" fill="#1a1a1a">Записать</text>
<text x="370" y="331" text-anchor="middle" font-size="12" fill="#1a1a1a">урожай сезона</text>
<!-- UC5 -->
<ellipse cx="370" cy="400" rx="130" ry="26" fill="#EBF5FB" stroke="#2E86C1" stroke-width="1.5"/>
<text x="370" y="397" text-anchor="middle" font-size="12" fill="#1a1a1a">Зафиксировать</text>
<text x="370" y="411" text-anchor="middle" font-size="12" fill="#1a1a1a">цветение сорта</text>
<!-- UC6 -->
<ellipse cx="650" cy="80" rx="145" ry="26" fill="#EAFAF1" stroke="#1E8449" stroke-width="1.5"/>
<text x="650" y="77" text-anchor="middle" font-size="12" fill="#1a1a1a">Получить кол-во урожая</text>
<text x="650" y="91" text-anchor="middle" font-size="12" fill="#1a1a1a">по сорту и сезону</text>
<!-- UC7 -->
<ellipse cx="650" cy="185" rx="145" ry="26" fill="#EAFAF1" stroke="#1E8449" stroke-width="1.5"/>
<text x="650" y="182" text-anchor="middle" font-size="12" fill="#1a1a1a">Получить статистику</text>
<text x="650" y="196" text-anchor="middle" font-size="12" fill="#1a1a1a">гибели деревьев</text>
<!-- UC8 -->
<ellipse cx="650" cy="290" rx="145" ry="26" fill="#EAFAF1" stroke="#1E8449" stroke-width="1.5"/>
<text x="650" y="287" text-anchor="middle" font-size="12" fill="#1a1a1a">Запросить деревья</text>
<text x="650" y="301" text-anchor="middle" font-size="12" fill="#1a1a1a">с >2 сортами</text>
<!-- UC9 -->
<ellipse cx="650" cy="390" rx="145" ry="26" fill="#EAFAF1" stroke="#1E8449" stroke-width="1.5"/>
<text x="650" y="387" text-anchor="middle" font-size="12" fill="#1a1a1a">Получить кол-во</text>
<text x="650" y="401" text-anchor="middle" font-size="12" fill="#1a1a1a">сортов по виду</text>
<!-- ===== ЛИНИИ: Садовод → UC1..5 ===== -->
<line x1="88" y1="80" x2="240" y2="80" stroke="#333" stroke-width="1.2"/>
<line x1="88" y1="110" x2="240" y2="150" stroke="#333" stroke-width="1.2"/>
<line x1="88" y1="120" x2="240" y2="228" stroke="#333" stroke-width="1.2"/>
<line x1="88" y1="130" x2="240" y2="310" stroke="#333" stroke-width="1.2"/>
<line x1="88" y1="140" x2="240" y2="390" stroke="#333" stroke-width="1.2"/>
<!-- ===== ЛИНИИ: Аналитик → UC6..9 ===== -->
<line x1="88" y1="320" x2="505" y2="80" stroke="#333" stroke-width="1.2"/>
<line x1="88" y1="330" x2="505" y2="183" stroke="#333" stroke-width="1.2"/>
<line x1="88" y1="340" x2="505" y2="290" stroke="#333" stroke-width="1.2"/>
<line x1="88" y1="350" x2="505" y2="388" stroke="#333" stroke-width="1.2"/>
</svg>
</div>
<!-- ============ CLASS DIAGRAM ============ -->
<h2>Диаграмма классов (Class Diagram)</h2>
<div class="diagram-wrap">
<svg viewBox="0 0 1000 580" width="100%" style="min-width:900px; display:block;">
<defs>
<!-- Стрелка для 1:N (обычная) -->
<marker id="arr-open" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<path d="M0,0 L9,3 L0,6" fill="none" stroke="#333" stroke-width="1.2"/>
</marker>
<!-- Ромб для агрегации -->
<marker id="diamond" markerWidth="12" markerHeight="8" refX="0" refY="4" orient="auto">
<polygon points="0,4 5,0 10,4 5,8" fill="white" stroke="#333" stroke-width="1"/>
</marker>
</defs>
<!-- ===================================================
СУЩНОСТИ
=================================================== -->
<!-- SAD (Сад) x=30 y=30 w=180 -->
<rect x="30" y="30" width="185" height="130" fill="white" stroke="#333" stroke-width="1.5"/>
<rect x="30" y="30" width="185" height="30" fill="#D6EAF8" stroke="#333" stroke-width="1.5"/>
<text x="122" y="51" text-anchor="middle" font-size="13" font-weight="600" fill="#1a1a1a">SAD</text>
<line x1="30" y1="70" x2="215" y2="70" stroke="#aaa" stroke-width="0.8"/>
<text x="42" y="88" font-size="11.5" fill="#333">+ sad_id : INTEGER «PK»</text>
<text x="42" y="104" font-size="11.5" fill="#333">+ name : VARCHAR(100)</text>
<text x="42" y="120" font-size="11.5" fill="#333">+ owner_name : VARCHAR</text>
<text x="42" y="136" font-size="11.5" fill="#333">+ est_year : INTEGER</text>
<text x="42" y="152" font-size="11.5" fill="#aaa">——————————</text>
<!-- VID (Вид) x=280 y=30 -->
<rect x="280" y="30" width="185" height="115" fill="white" stroke="#333" stroke-width="1.5"/>
<rect x="280" y="30" width="185" height="30" fill="#D6EAF8" stroke="#333" stroke-width="1.5"/>
<text x="372" y="51" text-anchor="middle" font-size="13" font-weight="600" fill="#1a1a1a">VID</text>
<line x1="280" y1="70" x2="465" y2="70" stroke="#aaa" stroke-width="0.8"/>
<text x="292" y="88" font-size="11.5" fill="#333">+ vid_id : INTEGER «PK»</text>
<text x="292" y="104" font-size="11.5" fill="#333">+ name : VARCHAR(100)</text>
<text x="292" y="120" font-size="11.5" fill="#333">+ description : TEXT</text>
<text x="292" y="136" font-size="11.5" fill="#aaa">——————————</text>
<!-- SORT (Сорт) x=280 y=220 -->
<rect x="280" y="220" width="185" height="145" fill="white" stroke="#333" stroke-width="1.5"/>
<rect x="280" y="220" width="185" height="30" fill="#D5F5E3" stroke="#333" stroke-width="1.5"/>
<text x="372" y="241" text-anchor="middle" font-size="13" font-weight="600" fill="#1a1a1a">SORT</text>
<line x1="280" y1="260" x2="465" y2="260" stroke="#aaa" stroke-width="0.8"/>
<text x="292" y="278" font-size="11.5" fill="#333">+ sort_id : INTEGER «PK»</text>
<text x="292" y="294" font-size="11.5" fill="#7D3C98">+ vid_id : INTEGER «FK»</text>
<text x="292" y="310" font-size="11.5" fill="#333">+ name : VARCHAR(100)</text>
<text x="292" y="326" font-size="11.5" fill="#333">+ bloom_time : VARCHAR</text>
<text x="292" y="342" font-size="11.5" fill="#333">+ description : TEXT</text>
<text x="292" y="358" font-size="11.5" fill="#aaa">——————————</text>
<!-- DEREVO (Дерево) x=530 y=130 -->
<rect x="530" y="130" width="200" height="175" fill="white" stroke="#333" stroke-width="1.5"/>
<rect x="530" y="130" width="200" height="30" fill="#FDEBD0" stroke="#333" stroke-width="1.5"/>
<text x="630" y="151" text-anchor="middle" font-size="13" font-weight="600" fill="#1a1a1a">DEREVO</text>
<line x1="530" y1="170" x2="730" y2="170" stroke="#aaa" stroke-width="0.8"/>
<text x="542" y="188" font-size="11.5" fill="#333">+ derevo_id : INTEGER «PK»</text>
<text x="542" y="204" font-size="11.5" fill="#7D3C98">+ sad_id : INTEGER «FK»</text>
<text x="542" y="220" font-size="11.5" fill="#7D3C98">+ vid_id : INTEGER «FK»</text>
<text x="542" y="236" font-size="11.5" fill="#333">+ planted_date : DATE</text>
<text x="542" y="252" font-size="11.5" fill="#333">+ death_date : DATE</text>
<text x="542" y="268" font-size="11.5" fill="#888"> (NULL = живо)</text>
<text x="542" y="284" font-size="11.5" fill="#333">+ location_in_sad : VARCHAR</text>
<text x="542" y="298" font-size="11.5" fill="#aaa">——————————</text>
<!-- DEREVO_SORT (связка) x=530 y=390 -->
<rect x="530" y="390" width="200" height="110" fill="white" stroke="#333" stroke-width="1.5" stroke-dasharray="6,3"/>
<rect x="530" y="390" width="200" height="30" fill="#FADBD8" stroke="#333" stroke-width="1.5" stroke-dasharray="none"/>
<text x="630" y="411" text-anchor="middle" font-size="12" font-weight="600" fill="#1a1a1a">DEREVO_SORT</text>
<text x="630" y="424" text-anchor="middle" font-size="10" fill="#888" font-style="italic">«association table»</text>
<line x1="530" y1="430" x2="730" y2="430" stroke="#aaa" stroke-width="0.8"/>
<text x="542" y="448" font-size="11.5" fill="#7D3C98">+ derevo_id : INTEGER «FK»</text>
<text x="542" y="464" font-size="11.5" fill="#7D3C98">+ sort_id : INTEGER «FK»</text>
<text x="542" y="482" font-size="11.5" fill="#333">«PK» (derevo_id, sort_id)</text>
<text x="542" y="494" font-size="11.5" fill="#aaa">——————————</text>
<!-- UROZHAY (Урожай) x=790 y=220 -->
<rect x="790" y="220" width="185" height="165" fill="white" stroke="#333" stroke-width="1.5"/>
<rect x="790" y="220" width="185" height="30" fill="#D6EAF8" stroke="#333" stroke-width="1.5"/>
<text x="882" y="241" text-anchor="middle" font-size="13" font-weight="600" fill="#1a1a1a">UROZHAY</text>
<line x1="790" y1="260" x2="975" y2="260" stroke="#aaa" stroke-width="0.8"/>
<text x="802" y="278" font-size="11.5" fill="#333">+ urozhay_id «PK»</text>
<text x="802" y="294" font-size="11.5" fill="#7D3C98">+ derevo_id «FK»</text>
<text x="802" y="310" font-size="11.5" fill="#7D3C98">+ sort_id «FK»</text>
<text x="802" y="326" font-size="11.5" fill="#333">+ season_year : INTEGER</text>
<text x="802" y="342" font-size="11.5" fill="#333">+ quantity_kg : DECIMAL</text>
<text x="802" y="358" font-size="11.5" fill="#333">+ harvest_date : DATE</text>
<text x="802" y="374" font-size="11.5" fill="#aaa">——————————</text>
<!-- ===================================================
СВЯЗИ
=================================================== -->
<!-- SAD 1 → N DEREVO: правый край SAD → левый DEREVO -->
<line x1="215" y1="95" x2="530" y2="210"
stroke="#333" stroke-width="1.3" marker-end="url(#arr-open)"/>
<text x="320" y="130" font-size="12" fill="#333">1</text>
<text x="500" y="205" font-size="12" fill="#333">N</text>
<!-- VID 1 → N DEREVO: правый VID → левый DEREVO top -->
<line x1="465" y1="65" x2="530" y2="165"
stroke="#333" stroke-width="1.3" marker-end="url(#arr-open)"/>
<text x="472" y="90" font-size="12" fill="#333">1</text>
<text x="516" y="163" font-size="12" fill="#333">N</text>
<!-- VID 1 → N SORT: нижний VID → верхний SORT -->
<line x1="372" y1="145" x2="372" y2="220"
stroke="#333" stroke-width="1.3" marker-end="url(#arr-open)"/>
<text x="378" y="172" font-size="12" fill="#333">1</text>
<text x="378" y="215" font-size="12" fill="#333">N</text>
<!-- DEREVO N → M DEREVO_SORT: нижний DEREVO → верхний DEREVO_SORT -->
<line x1="630" y1="305" x2="630" y2="390"
stroke="#333" stroke-width="1.3" marker-end="url(#arr-open)"/>
<text x="636" y="332" font-size="12" fill="#333">N</text>
<text x="636" y="387" font-size="12" fill="#333">M</text>
<!-- SORT N → M DEREVO_SORT: правый SORT → левый DEREVO_SORT -->
<line x1="465" y1="340" x2="530" y2="440"
stroke="#333" stroke-width="1.3" marker-end="url(#arr-open)"/>
<text x="467" y="368" font-size="12" fill="#333">M</text>
<text x="516" y="438" font-size="12" fill="#333">N</text>
<!-- DEREVO 1 → N UROZHAY: правый DEREVO → левый UROZHAY -->
<line x1="730" y1="230" x2="790" y2="280"
stroke="#333" stroke-width="1.3" marker-end="url(#arr-open)"/>
<text x="733" y="248" font-size="12" fill="#333">1</text>
<text x="778" y="280" font-size="12" fill="#333">N</text>
<!-- SORT 1 → N UROZHAY: правый SORT → левый UROZHAY bottom -->
<line x1="465" y1="295" x2="790" y2="340"
stroke="#333" stroke-width="1.3" stroke-dasharray="5,3" marker-end="url(#arr-open)"/>
<text x="600" y="305" font-size="12" fill="#333">1</text>
<text x="778" y="345" font-size="12" fill="#333">N</text>
<!-- Множественность подписи -->
<!-- Легенда -->
<rect x="30" y="500" width="400" height="60" rx="6" fill="#f8f9fa" stroke="#ddd" stroke-width="1"/>
<text x="45" y="518" font-size="11" fill="#555" font-weight="600">Обозначения:</text>
<line x1="45" y1="535" x2="85" y2="535" stroke="#333" stroke-width="1.3" marker-end="url(#arr-open)"/>
<text x="90" y="539" font-size="11" fill="#333">— связь (стрелка к «многим»)</text>
<line x1="45" y1="552" x2="85" y2="552" stroke="#333" stroke-width="1.3" stroke-dasharray="5,3" marker-end="url(#arr-open)"/>
<text x="90" y="556" font-size="11" fill="#333">— связь через доп. таблицу</text>
<text x="270" y="518" font-size="11" fill="#7D3C98" font-weight="600">«FK»</text>
<text x="290" y="518" font-size="11" fill="#555">— внешний ключ</text>
<text x="270" y="535" font-size="11" fill="#333" font-weight="600">«PK»</text>
<text x="290" y="535" font-size="11" fill="#555">— первичный ключ</text>
<rect x="267" y="543" width="13" height="13" fill="#FADBD8" stroke="#333" stroke-width="1" stroke-dasharray="3,2"/>
<text x="287" y="553" font-size="11" fill="#555">— таблица-связка (M:N)</text>
</svg>
</div>
</body>
</html>