neo/algoritm-space
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: correct DRAKON diagram — proper skewer, hexagon, yes/no branches

Browse Source
This commit is contained in:
neo committed 2026-06-23 17:54:42 +05:00
1 parent 4ffca399e8
commit af38966817
1 file changed
+134 -69
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+134 -69
View File
@@ -937,101 +937,166 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
<div class="hero-diagram">
<span class="hero-diagram-label">Пример: наш процесс</span>
<div id="drakon-diagram">
<svg viewBox="0 0 500 560" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 520 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow-sm" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="1" stdDeviation="2" flood-color="#000" flood-opacity="0.06"/>
<!-- Тень для иконок -->
<filter id="shadow" x="-10%" y="-10%" width="120%" height="130%">
<feDropShadow dx="0" dy="1" stdDeviation="1.5" flood-color="#000" flood-opacity="0.06"/>
</filter>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="4" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#6b7280"/>
<!-- Стрелка для линий -->
<marker id="arrow" markerWidth="6" markerHeight="5" refX="5" refY="2.5" orient="auto">
<path d="M0,0 L6,2.5 L0,5 Z" fill="#6b7280"/>
</marker>
<!-- Зелёная стрелка -->
<marker id="arrow-green" markerWidth="6" markerHeight="5" refX="5" refY="2.5" orient="auto">
<path d="M0,0 L6,2.5 L0,5 Z" fill="#16a34a"/>
</marker>
<!-- Красная стрелка -->
<marker id="arrow-red" markerWidth="6" markerHeight="5" refX="5" refY="2.5" orient="auto">
<path d="M0,0 L6,2.5 L0,5 Z" fill="#ef4444"/>
</marker>
</defs>
<!-- Connection lines (drawn behind nodes) -->
<!-- Entry → Action 1 -->
<line x1="200" y1="52" x2="200" y2="78" stroke="#6b7280" stroke-width="2" marker-end="url(#arrow)"/>
<!-- Action 1 → Action 2 -->
<line x1="200" y1="130" x2="200" y2="156" stroke="#6b7280" stroke-width="2" marker-end="url(#arrow)"/>
<!-- Action 2 → Question -->
<line x1="200" y1="208" x2="200" y2="234" stroke="#6b7280" stroke-width="2" marker-end="url(#arrow)"/>
<!-- ============================================
СКЕВЕР (основная вертикальная линия)
贯穿所有 main flow 元素
============================================ -->
<!-- От entry до Action 1 -->
<line x1="210" y1="30" x2="210" y2="52" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- От Action 1 до Action 2 -->
<line x1="210" y1="92" x2="210" y2="114" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- От Action 2 до Question (верх) -->
<line x1="210" y1="184" x2="210" y2="200" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- От Question (низ, yes path) до Action 3 -->
<line x1="210" y1="260" x2="210" y2="282" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- От Action 3 до Action 4 -->
<line x1="210" y1="332" x2="210" y2="354" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- От Action 4 до End -->
<line x1="210" y1="404" x2="210" y2="426" stroke="#6b7280" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- Question → Yes (down, main path) -->
<line x1="200" y1="296" x2="200" y2="322" stroke="#6b7280" stroke-width="2" marker-end="url(#arrow)"/>
<!-- Question → No (right branch) -->
<line x1="280" y1="265" x2="350" y2="265" stroke="#6b7280" stroke-width="2" marker-end="url(#arrow)"/>
<line x1="350" y1="265" x2="350" y2="380" stroke="#6b7280" stroke-width="2" stroke-dasharray="4,3"/>
<line x1="350" y1="380" x2="260" y2="380" stroke="#6b7280" stroke-width="2" stroke-dasharray="4,3" marker-end="url(#arrow)"/>
<!-- Ветка «нет» — от вопроса вправо -->
<line x1="270" y1="230" x2="310" y2="230" stroke="#ef4444" stroke-width="1.5" marker-end="url(#arrow-red)"/>
<!-- От Action 5 (уточняем) вниз -->
<line x1="310" y1="282" x2="310" y2="354" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="4,3"/>
<!-- Возврат на основной поток (before Action 4) -->
<line x1="310" y1="354" x2="240" y2="354" stroke="#6b7280" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrow)"/>
<!-- Action 3 → Action 4 -->
<line x1="200" y1="356" x2="200" y2="382" stroke="#6b7280" stroke-width="2" marker-end="url(#arrow)"/>
<!-- Action 4 → End -->
<line x1="200" y1="434" x2="200" y2="460" stroke="#6b7280" stroke-width="2" marker-end="url(#arrow)"/>
<!-- ============================================
ИКОНКИ ДРАКОН
============================================ -->
<!-- === Entry point (branch with arrow icon) === -->
<g filter="url(#shadow-sm)">
<polygon points="200,10 230,26 230,42 200,58 170,42 170,26" fill="#ffffff" stroke="#16a34a" stroke-width="2"/>
<path d="M200,18 L200,50" stroke="#16a34a" stroke-width="2"/>
<path d="M194,28 L200,20 L206,28" stroke="#16a34a" stroke-width="1.5" fill="none"/>
<text x="200" y="95" text-anchor="middle" fill="#6b7280" font-family="Inter,sans-serif" font-size="11">Начало</text>
<!-- ENTRY — ветка (стрелка вверх) -->
<g filter="url(#shadow)">
<polygon points="210,12 230,24 230,36 210,48 190,36 190,24"
fill="#ffffff" stroke="#16a34a" stroke-width="1.5"/>
<!-- Стрелка внутрь (вниз) -->
<path d="M210,16 L210,44" stroke="#16a34a" stroke-width="1.5"/>
<path d="M204,26 L210,18 L216,26" stroke="#16a34a" stroke-width="1.2" fill="none"/>
</g>
<!-- === Action 1: Брифинг клиента === -->
<g filter="url(#shadow-sm)">
<rect x="110" y="78" width="180" height="52" rx="8" fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
<text x="200" y="110" text-anchor="middle" fill="#111827" font-family="Inter,sans-serif" font-size="13" font-weight="500">Брифинг клиента</text>
<!-- ACTION 1: Брифинг клиента -->
<g filter="url(#shadow)">
<rect x="110" y="52" width="200" height="40" rx="6"
fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
<text x="210" y="77" text-anchor="middle" fill="#111827"
font-family="Inter,sans-serif" font-size="13" font-weight="500">
Брифинг клиента
</text>
</g>
<!-- === Action 2: Аудит процессов === -->
<g filter="url(#shadow-sm)">
<rect x="100" y="156" width="200" height="52" rx="8" fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
<text x="200" y="188" text-anchor="middle" fill="#111827" font-family="Inter,sans-serif" font-size="13" font-weight="500">Аудит процессов</text>
<!-- ACTION 2: Аудит процессов -->
<g filter="url(#shadow)">
<rect x="110" y="114" width="200" height="40" rx="6"
fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
<text x="210" y="139" text-anchor="middle" fill="#111827"
font-family="Inter,sans-serif" font-size="13" font-weight="500">
Аудит процессов
</text>
</g>
<!-- === Question: Понятно? === -->
<g filter="url(#shadow-sm)">
<polygon points="200,234 280,265 280,300 200,331 120,300 120,265" fill="#ffffff" stroke="#f59e0b" stroke-width="2"/>
<text x="200" y="287" text-anchor="middle" fill="#92400e" font-family="Inter,sans-serif" font-size="14" font-weight="600">Понятно?</text>
<!-- QUESTION: Понятно? (шестиугольник на скевере) -->
<g filter="url(#shadow)">
<polygon points="210,200 250,220 250,240 210,260 170,240 170,220"
fill="#ffffff" stroke="#f59e0b" stroke-width="1.5"/>
<text x="210" y="235" text-anchor="middle" fill="#92400e"
font-family="Inter,sans-serif" font-size="13" font-weight="600">
Понятно?
</text>
</g>
<!-- "да" label -->
<rect x="180" y="304" width="40" height="20" rx="10" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/>
<text x="200" y="318" text-anchor="middle" fill="#15803d" font-family="Inter,sans-serif" font-size="11" font-weight="700">да</text>
<!-- Метки «да» и «нет» -->
<rect x="185" y="268" width="50" height="20" rx="10"
fill="#dcfce7" stroke="#16a34a" stroke-width="1"/>
<text x="210" y="282" text-anchor="middle" fill="#15803d"
font-family="Inter,sans-serif" font-size="11" font-weight="700">
да
</text>
<!-- "нет" label -->
<rect x="310" y="252" width="40" height="20" rx="10" fill="#fee2e2" stroke="#ef4444" stroke-width="1"/>
<text x="330" y="266" text-anchor="middle" fill="#dc2626" font-family="Inter,sans-serif" font-size="11" font-weight="700">нет</text>
<rect x="280" y="218" width="50" height="20" rx="10"
fill="#fee2e2" stroke="#ef4444" stroke-width="1"/>
<text x="305" y="232" text-anchor="middle" fill="#dc2626"
font-family="Inter,sans-serif" font-size="11" font-weight="700">
нет
</text>
<!-- === Action 3: Создание схем ДРАКОН === -->
<g filter="url(#shadow-sm)">
<rect x="105" y="322" width="190" height="52" rx="8" fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
<text x="200" y="354" text-anchor="middle" fill="#111827" font-family="Inter,sans-serif" font-size="13" font-weight="500">Создание схем</text>
<text x="200" y="370" text-anchor="middle" fill="#111827" font-family="Inter,sans-serif" font-size="13" font-weight="500">ДРАКОН</text>
<!-- ACTION 3: Создание схем ДРАКОН (на основном потоке) -->
<g filter="url(#shadow)">
<rect x="110" y="282" width="200" height="50" rx="6"
fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
<text x="210" y="305" text-anchor="middle" fill="#111827"
font-family="Inter,sans-serif" font-size="12" font-weight="500">
Создание схем
</text>
<text x="210" y="322" text-anchor="middle" fill="#111827"
font-family="Inter,sans-serif" font-size="12" font-weight="500">
ДРАКОН
</text>
</g>
<!-- === Action 4: Согласование === -->
<g filter="url(#shadow-sm)">
<rect x="110" y="382" width="180" height="52" rx="8" fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
<text x="200" y="414" text-anchor="middle" fill="#111827" font-family="Inter,sans-serif" font-size="13" font-weight="500">Согласование</text>
<!-- ACTION 5: Уточняем процесс (на стороне, ветка «нет») -->
<g filter="url(#shadow)">
<rect x="230" y="230" width="160" height="52" rx="6"
fill="#fef2f2" stroke="#fca5a5" stroke-width="1"/>
<text x="310" y="255" text-anchor="middle" fill="#991b1b"
font-family="Inter,sans-serif" font-size="12" font-weight="500">
Уточняем процесс
</text>
<text x="310" y="272" text-anchor="middle" fill="#6b7280"
font-family="Inter,sans-serif" font-size="10">
(ветка «нет»)
</text>
</g>
<!-- === No-path action: Уточняем процесс === -->
<g filter="url(#shadow-sm)">
<rect x="255" y="380" width="150" height="52" rx="8" fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
<text x="330" y="406" text-anchor="middle" fill="#111827" font-family="Inter,sans-serif" font-size="12" font-weight="500">Уточняем</text>
<text x="330" y="422" text-anchor="middle" fill="#111827" font-family="Inter,sans-serif" font-size="12" font-weight="500">процесс</text>
<!-- ACTION 4: Согласование -->
<g filter="url(#shadow)">
<rect x="110" y="354" width="200" height="50" rx="6"
fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
<text x="210" y="384" text-anchor="middle" fill="#111827"
font-family="Inter,sans-serif" font-size="14" font-weight="500">
Согласование
</text>
</g>
<!-- === End: Готово === -->
<g filter="url(#shadow-sm)">
<rect x="120" y="460" width="160" height="52" rx="26" fill="#f9fafb" stroke="#9ca3af" stroke-width="1.5"/>
<text x="200" y="491" text-anchor="middle" fill="#6b7280" font-family="Inter,sans-serif" font-size="14" font-weight="600">Готово</text>
<!-- END: Готово (округлённый прямоугольник) -->
<g filter="url(#shadow)">
<rect x="120" y="426" width="180" height="44" rx="22"
fill="#f9fafb" stroke="#9ca3af" stroke-width="1.5"/>
<text x="210" y="453" text-anchor="middle" fill="#6b7280"
font-family="Inter,sans-serif" font-size="14" font-weight="600">
Готово
</text>
</g>
<!-- Decorative dots -->
<circle cx="100" cy="100" r="2" fill="#dcfce7" opacity="0.6"/>
<circle cx="400" cy="200" r="1.5" fill="#fee2e2" opacity="0.6"/>
<circle cx="150" cy="500" r="2" fill="#dcfce7" opacity="0.4"/>
<circle cx="380" cy="480" r="1.5" fill="#f59e0b" opacity="0.3"/>
<!-- Подписи боковых линий -->
<text x="320" y="310" fill="#6b7280" font-family="Inter,sans-serif" font-size="10" text-anchor="middle" opacity="0.6">
возврат в основной поток
</text>
<!-- Декоративные точки -->
<circle cx="90" cy="80" r="2" fill="#dcfce7" opacity="0.5"/>
<circle cx="420" cy="120" r="1.5" fill="#fee2e2" opacity="0.4"/>
<circle cx="100" cy="500" r="2" fill="#dcfce7" opacity="0.3"/>
<circle cx="440" cy="380" r="1.5" fill="#dcfce7" opacity="0.3"/>
</svg>
</div>
</div>