BP_diagram.html - main - AntiManager/BusinessProcessMermaidGenerator

BP_diagram.html
1 037 строк55 KB
Eugene
фикс хтмл длина строки в узле
01 ноя 2025, 14:46
01 ноя 2025, 14:462a33440
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Диаграмма бизнес-процесса</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@11.0.1/dist/mermaid.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.5;
            color: #333;
            background: #fff;
            padding: 0;
        }
        
        .container {
            max-width: 100%;
            margin: 0;
            padding: 0;
        }
        
        /* Секция диаграммы - ПЕРВАЯ И ГЛАВНАЯ */
        .diagram-section {
            background: #fff;
            border-bottom: 1px solid #e1e5e9;
            margin: 0;
        }
        
        .diagram-header {
            background: #f8f9fa;
            padding: 12px 20px;
            border-bottom: 1px solid #e1e5e9;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .diagram-controls {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .control-btn {
            background: #6c757d;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            transition: background 0.2s;
        }
        
        .control-btn:hover {
            background: #5a6268;
        }
        
        .download-btn {
            background: #28a745;
        }
        
        .download-btn:hover {
            background: #218838;
        }
        
        .zoom-info {
            background: #fff;
            padding: 4px 8px;
            border-radius: 3px;
            font-size: 12px;
            min-width: 60px;
            text-align: center;
            border: 1px solid #ddd;
        }
        
        .diagram-container {
            width: 100%;
            height: 75vh;
            min-height: 500px;
            overflow: auto;
            background: #fafafa;
            cursor: grab;
        }
        
        .diagram-container.dragging {
            cursor: grabbing;
        }
        
        #mermaid-diagram {
            padding: 30px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100%;
        }
        
        /* Минималистичные стили Mermaid */
        .mermaid {
            text-align: center;
        }
        
        .mermaid .node rect {
            stroke-width: 1.5px;
            rx: 4px;
            ry: 4px;
        }
        
        /* Секции с таблицами - ПОСЛЕ ДИАГРАММЫ */
        .content-section {
            max-width: 1400px;
            margin: 0 auto;
            padding: 30px 20px;
        }
        
        .section {
            margin: 0 0 30px 0;
            background: #fff;
        }
        
        .section-header {
            font-size: 1.4em;
            font-weight: 600;
            margin: 0 0 15px 0;
            padding: 0 0 10px 0;
            border-bottom: 2px solid #e1e5e9;
            color: #2c3e50;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        
        .stat-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            border-left: 4px solid #3498db;
        }
        
        .stat-value {
            font-size: 1.8em;
            font-weight: bold;
            color: #2c3e50;
            display: block;
        }
        
        .stat-label {
            font-size: 0.9em;
            color: #6c757d;
            margin-top: 5px;
        }
        
        .nav-hint {
            font-size: 0.8em;
            color: #6c757d;
            text-align: center;
            padding: 10px;
            background: #f8f9fa;
            border-top: 1px solid #e1e5e9;
        }
        
        .critical-item {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            padding: 10px;
            margin: 8px 0;
            border-radius: 4px;
            font-size: 0.9em;
        }
        
        @media (max-width: 768px) {
            .diagram-controls {
                justify-content: center;
            }
            
            .diagram-container {
                height: 60vh;
                padding: 15px;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .content-section {
                padding: 20px 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- ДИАГРАММА - ПЕРВАЯ И ГЛАВНАЯ -->
        <div class="diagram-section">
            <div class="diagram-header">
                <div style="font-weight: 600; color: #2c3e50;">Диаграмма бизнес-процесса</div>
                <div class="diagram-controls">
                    <button class="control-btn" onclick="zoomOut()" title="Уменьшить">−</button>
                    <div class="zoom-info" id="zoomInfo">100%</div>
                    <button class="control-btn" onclick="zoomIn()" title="Увеличить">+</button>
                    <button class="control-btn" onclick="resetView()" title="Сбросить вид">Сброс</button>
                    <button class="control-btn" onclick="fitToScreen()" title="Вместить в экран">Вместить</button>
                    <button class="control-btn download-btn" onclick="downloadPNG()" title="Скачать PNG">PNG</button>
                </div>
            </div>
            <div class="diagram-container" id="diagramContainer">
                <div class="mermaid" id="mermaid-diagram">
graph LR
    classDef external fill:yellow,stroke:#333,stroke-width:2px;;
    classDef final fill:red,stroke:#333,stroke-width:2px,color:white;;
    classDef merge fill:orange,stroke:#333,stroke-width:2px;;
    classDef split fill:purple,stroke:#333,stroke-width:2px,color:white;;
    classDef critical fill:#ff4444,stroke:#000,stroke-width:3px,color:white,stroke-dasharray:5 5;;
    Данные_о_спросе(["Данные о спросе"]):::external
    Жалоба_клиента(["Жалоба клиента"]):::external
    Запрос_клиента(["Запрос клиента"]):::external
    Запрос_на_возврат(["Запрос на возврат"]):::external
    Исторические_продажи(["Исторические продажи"]):::external
    Сезонность(["Сезонность"]):::external
    Товар_продан(["Товар продан"]):::external
    Возврат_обработан(["Возврат обработан"]):::final
    Жалоба_решена(["Жалоба решена"]):::final
    Заказ_закрыт(["Заказ закрыт"]):::final
    План_закупок(["План закупок"]):::final
    Анализ_качества["Анализ качества: Анализ тенденций качества продукции"]
    Закрытие_заказа["Закрытие заказа: Окончательное закрытие заказа в системе"]
    Закупка_материалов["Закупка материалов: Закупка материалов для производства"]:::merge
    Контроль_качества["Контроль качества: Проверка качества готовой продукции"]
    Корректирующие_действия["Корректирующие действия: Разработка плана улучшения качества"]
    Обработка_возвратов["Обработка возвратов: Обработка запросов на возврат товара"]
    Ожидание_оплаты["Ожидание оплаты: Ожидание поступления оплаты от клиента"]
    Отправка_счета["Отправка счета: Отправка счета клиенту по email"]
    Отслеживание_доставки["Отслеживание доставки: Мониторинг статуса доставки"]
    Оформление_доставки["Оформление доставки: Оформление доставки через курьерскую службу"]
    Планирование_закупок["Планирование закупок: Планирование объемов закупок"]:::merge
    Подготовка_к_отгрузке["Подготовка к отгрузке: Упаковка товара и подготовка к отправке"]:::merge
    Подтверждение_получения["Подтверждение получения: Подтверждение получения от клиента"]
    Поступление_на_склад["Поступление на склад: Размещение товара на складе"]
    Прием_жалоб["Прием жалоб: Регистрация и классификация жалоб"]
    Прием_заказа["Прием заказа: Проверка доступности товара и подтверждение заказа"]
    Проверка_наличия["Проверка наличия: Проверка наличия товара на складе"]
    Прогнозирование_спроса["Прогнозирование спроса: Прогнозирование будущего спроса"]:::merge
    Производство["Производство: Производство товаров согласно плану"]
    Расследование_жалобы["Расследование жалобы: Анализ причин возникновения жалобы"]:::split
    Резервирование_товара["Резервирование товара: Резервирование товара для заказа"]:::split
    Решение_по_жалобе["Решение по жалобе: Принятие решения по устранению жалобы"]
    Учет_качества["Учет качества: Сбор статистики по качеству товаров"]
    Учет_остатков["Учет остатков: Обновление данных об остатках"]:::merge
    Формирование_счета["Формирование счета: Создание счета с учетом доставки и налогов"]
    Прием_заказа-- "Подтвержденный заказ" -->Проверка_наличия
    Запрос_клиента-- "Запрос клиента" -->Прием_заказа
    Проверка_наличия-- "Информация о наличии" -->Резервирование_товара
    Резервирование_товара-- "Зарезервированный товар" -->Формирование_счета
    Резервирование_товара-- "Зарезервированный товар" -->Подготовка_к_отгрузке
    Формирование_счета-- "Счет на оплату" -->Отправка_счета
    Отправка_счета-- "Счет отправлен" -->Ожидание_оплаты
    Ожидание_оплаты-- "Оплата получена" -->Подготовка_к_отгрузке
    Подготовка_к_отгрузке-- "Товар упакован" -->Оформление_доставки
    Оформление_доставки-- "Товар передан в доставку" -->Отслеживание_доставки
    Отслеживание_доставки-- "Товар доставлен" -->Подтверждение_получения
    Подтверждение_получения-- "Получение подтверждено" -->Закрытие_заказа
    Закрытие_заказа-- "Заказ закрыт" -->Заказ_закрыт
    Обработка_возвратов-- "Возврат обработан" -->Возврат_обработан
    Запрос_на_возврат-- "Запрос на возврат" -->Обработка_возвратов
    Прием_жалоб-- "Жалоба зарегистрирована" -->Расследование_жалобы
    Жалоба_клиента-- "Жалоба клиента" -->Прием_жалоб
    Расследование_жалобы-- "Причина жалобы" -->Решение_по_жалобе
    Расследование_жалобы-- "Причина жалобы" -->Учет_качества
    Решение_по_жалобе-- "Жалоба решена" -->Жалоба_решена
    Учет_качества-- "Данные о качестве" -->Анализ_качества
    Анализ_качества-- "Отчет о качестве" -->Корректирующие_действия
    Корректирующие_действия-- "План улучшений" -->Закупка_материалов
    Закупка_материалов-- "Материалы закуплены" -->Производство
    Данные_о_спросе-- "Данные о спросе" -->Закупка_материалов
    Производство-- "Готовая продукция" -->Контроль_качества
    Контроль_качества-- "Товар проверен" -->Поступление_на_склад
    Поступление_на_склад-- "Товар на складе" -->Учет_остатков
    Учет_остатков-- "Остатки на складе" -->Планирование_закупок
    Товар_продан-- "Товар продан" -->Учет_остатков
    Прогнозирование_спроса-- "Прогноз спроса" -->Планирование_закупок
    Исторические_продажи-- "Исторические продажи" -->Прогнозирование_спроса
    Сезонность-- "Сезонность" -->Прогнозирование_спроса
    Планирование_закупок-- "План закупок" -->План_закупок
                </div>
            </div>
            <div class="nav-hint">
                Колесо мыши - масштаб • ЛКМ + перетаскивание - навигация • Ctrl+колесо - точный масштаб
            </div>
        </div>

        <!-- СТАТИСТИКА И АНАЛИЗ -->
        <div class="content-section">
            <div class="section">
                <h2 class="section-header">Статистика процесса</h2>
                <div class="stats-grid">
                    <div class="stat-item">
                        <span class="stat-value">25</span>
                        <span class="stat-label">Операций</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-value">7</span>
                        <span class="stat-label">Внешние входы</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-value">4</span>
                        <span class="stat-label">Конечные выходы</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-value">0</span>
                        <span class="stat-label">Критические операции</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-value">5</span>
                        <span class="stat-label">Точек слияния</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-value">2</span>
                        <span class="stat-label">Точек разветвления</span>
                    </div>
                </div>
            </div>

            <!-- Критические операции -->
            

            <!-- Реестр операций -->
            <div class="section">
                <h2 class="section-header">Реестр операций</h2>
                <table style="width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 14px;">
<thead><tr>
<th style="border: 1px solid #ddd; padding: 8px; text-align: left; background: #f9f9f9;">Операция</th>
<th style="border: 1px solid #ddd; padding: 8px; text-align: left; background: #f9f9f9;">Группа</th>
<th style="border: 1px solid #ddd; padding: 8px; text-align: left; background: #f9f9f9;">Владелец</th>
<th style="border: 1px solid #ddd; padding: 8px; text-align: left; background: #f9f9f9;">Входы</th>
<th style="border: 1px solid #ddd; padding: 8px; text-align: left; background: #f9f9f9;">Выходы</th>
<th style="border: 1px solid #ddd; padding: 8px; text-align: left; background: #f9f9f9;">Тип узла</th>
<th style="border: 1px solid #ddd; padding: 8px; text-align: left; background: #f9f9f9;">Описание</th>
</tr></thead>
<tbody>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Прием заказа</td>
<td style="border: 1px solid #ddd; padding: 8px;">Продажи</td>
<td style="border: 1px solid #ddd; padding: 8px;">Менеджер</td>
<td style="border: 1px solid #ddd; padding: 8px;">Запрос клиента</td>
<td style="border: 1px solid #ddd; padding: 8px;">Подтвержденный заказ</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Проверка доступности товара и подтверждение заказа</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Проверка наличия</td>
<td style="border: 1px solid #ddd; padding: 8px;">Склад</td>
<td style="border: 1px solid #ddd; padding: 8px;">Кладовщик</td>
<td style="border: 1px solid #ddd; padding: 8px;">Подтвержденный заказ</td>
<td style="border: 1px solid #ddd; padding: 8px;">Информация о наличии</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Проверка наличия товара на складе</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Резервирование товара</td>
<td style="border: 1px solid #ddd; padding: 8px;">Склад</td>
<td style="border: 1px solid #ddd; padding: 8px;">Кладовщик</td>
<td style="border: 1px solid #ddd; padding: 8px;">Информация о наличии</td>
<td style="border: 1px solid #ddd; padding: 8px;">Зарезервированный товар</td>
<td style="border: 1px solid #ddd; padding: 8px;">Разветвление</td>
<td style="border: 1px solid #ddd; padding: 8px;">Резервирование товара для заказа</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Формирование счета</td>
<td style="border: 1px solid #ddd; padding: 8px;">Финансы</td>
<td style="border: 1px solid #ddd; padding: 8px;">Бухгалтер</td>
<td style="border: 1px solid #ddd; padding: 8px;">Зарезервированный товар</td>
<td style="border: 1px solid #ddd; padding: 8px;">Счет на оплату</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Создание счета с учетом доставки и налогов</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Отправка счета</td>
<td style="border: 1px solid #ddd; padding: 8px;">Продажи</td>
<td style="border: 1px solid #ddd; padding: 8px;">Менеджер</td>
<td style="border: 1px solid #ddd; padding: 8px;">Счет на оплату</td>
<td style="border: 1px solid #ddd; padding: 8px;">Счет отправлен</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Отправка счета клиенту по email</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Ожидание оплаты</td>
<td style="border: 1px solid #ddd; padding: 8px;">Финансы</td>
<td style="border: 1px solid #ddd; padding: 8px;">Бухгалтер</td>
<td style="border: 1px solid #ddd; padding: 8px;">Счет отправлен</td>
<td style="border: 1px solid #ddd; padding: 8px;">Оплата получена</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Ожидание поступления оплаты от клиента</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Подготовка к отгрузке</td>
<td style="border: 1px solid #ddd; padding: 8px;">Склад</td>
<td style="border: 1px solid #ddd; padding: 8px;">Кладовщик</td>
<td style="border: 1px solid #ddd; padding: 8px;">Зарезервированный товар, Оплата получена</td>
<td style="border: 1px solid #ddd; padding: 8px;">Товар упакован</td>
<td style="border: 1px solid #ddd; padding: 8px;">Слияние</td>
<td style="border: 1px solid #ddd; padding: 8px;">Упаковка товара и подготовка к отправке</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Оформление доставки</td>
<td style="border: 1px solid #ddd; padding: 8px;">Логистика</td>
<td style="border: 1px solid #ddd; padding: 8px;">Логист</td>
<td style="border: 1px solid #ddd; padding: 8px;">Товар упакован</td>
<td style="border: 1px solid #ddd; padding: 8px;">Товар передан в доставку</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Оформление доставки через курьерскую службу</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Отслеживание доставки</td>
<td style="border: 1px solid #ddd; padding: 8px;">Логистика</td>
<td style="border: 1px solid #ddd; padding: 8px;">Логист</td>
<td style="border: 1px solid #ddd; padding: 8px;">Товар передан в доставку</td>
<td style="border: 1px solid #ddd; padding: 8px;">Товар доставлен</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Мониторинг статуса доставки</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Подтверждение получения</td>
<td style="border: 1px solid #ddd; padding: 8px;">Продажи</td>
<td style="border: 1px solid #ddd; padding: 8px;">Менеджер</td>
<td style="border: 1px solid #ddd; padding: 8px;">Товар доставлен</td>
<td style="border: 1px solid #ddd; padding: 8px;">Получение подтверждено</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Подтверждение получения от клиента</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Закрытие заказа</td>
<td style="border: 1px solid #ddd; padding: 8px;">Продажи</td>
<td style="border: 1px solid #ddd; padding: 8px;">Менеджер</td>
<td style="border: 1px solid #ddd; padding: 8px;">Получение подтверждено</td>
<td style="border: 1px solid #ddd; padding: 8px;">Заказ закрыт</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Окончательное закрытие заказа в системе</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Обработка возвратов</td>
<td style="border: 1px solid #ddd; padding: 8px;">Сервис</td>
<td style="border: 1px solid #ddd; padding: 8px;">Менеджер</td>
<td style="border: 1px solid #ddd; padding: 8px;">Запрос на возврат</td>
<td style="border: 1px solid #ddd; padding: 8px;">Возврат обработан</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обработка запросов на возврат товара</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Прием жалоб</td>
<td style="border: 1px solid #ddd; padding: 8px;">Сервис</td>
<td style="border: 1px solid #ddd; padding: 8px;">Менеджер</td>
<td style="border: 1px solid #ddd; padding: 8px;">Жалоба клиента</td>
<td style="border: 1px solid #ddd; padding: 8px;">Жалоба зарегистрирована</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Регистрация и классификация жалоб</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Расследование жалобы</td>
<td style="border: 1px solid #ddd; padding: 8px;">Сервис</td>
<td style="border: 1px solid #ddd; padding: 8px;">Менеджер</td>
<td style="border: 1px solid #ddd; padding: 8px;">Жалоба зарегистрирована</td>
<td style="border: 1px solid #ddd; padding: 8px;">Причина жалобы</td>
<td style="border: 1px solid #ddd; padding: 8px;">Разветвление</td>
<td style="border: 1px solid #ddd; padding: 8px;">Анализ причин возникновения жалобы</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Решение по жалобе</td>
<td style="border: 1px solid #ddd; padding: 8px;">Сервис</td>
<td style="border: 1px solid #ddd; padding: 8px;">Менеджер</td>
<td style="border: 1px solid #ddd; padding: 8px;">Причина жалобы</td>
<td style="border: 1px solid #ddd; padding: 8px;">Жалоба решена</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Принятие решения по устранению жалобы</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Учет качества</td>
<td style="border: 1px solid #ddd; padding: 8px;">Качество</td>
<td style="border: 1px solid #ddd; padding: 8px;">Менеджер качества</td>
<td style="border: 1px solid #ddd; padding: 8px;">Причина жалобы</td>
<td style="border: 1px solid #ddd; padding: 8px;">Данные о качестве</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Сбор статистики по качеству товаров</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Анализ качества</td>
<td style="border: 1px solid #ddd; padding: 8px;">Качество</td>
<td style="border: 1px solid #ddd; padding: 8px;">Менеджер качества</td>
<td style="border: 1px solid #ddd; padding: 8px;">Данные о качестве</td>
<td style="border: 1px solid #ddd; padding: 8px;">Отчет о качестве</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Анализ тенденций качества продукции</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Корректирующие действия</td>
<td style="border: 1px solid #ddd; padding: 8px;">Производство</td>
<td style="border: 1px solid #ddd; padding: 8px;">Директор</td>
<td style="border: 1px solid #ddd; padding: 8px;">Отчет о качестве</td>
<td style="border: 1px solid #ddd; padding: 8px;">План улучшений</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Разработка плана улучшения качества</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Закупка материалов</td>
<td style="border: 1px solid #ddd; padding: 8px;">Закупки</td>
<td style="border: 1px solid #ddd; padding: 8px;">Закупщик</td>
<td style="border: 1px solid #ddd; padding: 8px;">Данные о спросе, План улучшений</td>
<td style="border: 1px solid #ddd; padding: 8px;">Материалы закуплены</td>
<td style="border: 1px solid #ddd; padding: 8px;">Слияние</td>
<td style="border: 1px solid #ddd; padding: 8px;">Закупка материалов для производства</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Производство</td>
<td style="border: 1px solid #ddd; padding: 8px;">Производство</td>
<td style="border: 1px solid #ddd; padding: 8px;">Производственник</td>
<td style="border: 1px solid #ddd; padding: 8px;">Материалы закуплены</td>
<td style="border: 1px solid #ddd; padding: 8px;">Готовая продукция</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Производство товаров согласно плану</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Контроль качества</td>
<td style="border: 1px solid #ddd; padding: 8px;">Качество</td>
<td style="border: 1px solid #ddd; padding: 8px;">Контролер</td>
<td style="border: 1px solid #ddd; padding: 8px;">Готовая продукция</td>
<td style="border: 1px solid #ddd; padding: 8px;">Товар проверен</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Проверка качества готовой продукции</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Поступление на склад</td>
<td style="border: 1px solid #ddd; padding: 8px;">Склад</td>
<td style="border: 1px solid #ddd; padding: 8px;">Кладовщик</td>
<td style="border: 1px solid #ddd; padding: 8px;">Товар проверен</td>
<td style="border: 1px solid #ddd; padding: 8px;">Товар на складе</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обычный</td>
<td style="border: 1px solid #ddd; padding: 8px;">Размещение товара на складе</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Учет остатков</td>
<td style="border: 1px solid #ddd; padding: 8px;">Склад</td>
<td style="border: 1px solid #ddd; padding: 8px;">Кладовщик</td>
<td style="border: 1px solid #ddd; padding: 8px;">Товар на складе, Товар продан</td>
<td style="border: 1px solid #ddd; padding: 8px;">Остатки на складе</td>
<td style="border: 1px solid #ddd; padding: 8px;">Слияние</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обновление данных об остатках</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Прогнозирование спроса</td>
<td style="border: 1px solid #ddd; padding: 8px;">Аналитика</td>
<td style="border: 1px solid #ddd; padding: 8px;">Аналитик</td>
<td style="border: 1px solid #ddd; padding: 8px;">Исторические продажи, Сезонность</td>
<td style="border: 1px solid #ddd; padding: 8px;">Прогноз спроса</td>
<td style="border: 1px solid #ddd; padding: 8px;">Слияние</td>
<td style="border: 1px solid #ddd; padding: 8px;">Прогнозирование будущего спроса</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Планирование закупок</td>
<td style="border: 1px solid #ddd; padding: 8px;">Закупки</td>
<td style="border: 1px solid #ddd; padding: 8px;">Закупщик</td>
<td style="border: 1px solid #ddd; padding: 8px;">Остатки на складе, Прогноз спроса</td>
<td style="border: 1px solid #ddd; padding: 8px;">План закупок</td>
<td style="border: 1px solid #ddd; padding: 8px;">Слияние</td>
<td style="border: 1px solid #ddd; padding: 8px;">Планирование объемов закупок</td>
</tr>
</tbody></table>
            </div>

            <!-- Реестр входов/выходов -->
            <div class="section">
                <h2 class="section-header">Входы и выходы системы</h2>
                <table style="width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 14px;">
<thead><tr>
<th style="border: 1px solid #ddd; padding: 8px; text-align: left; background: #f9f9f9;">Элемент</th>
<th style="border: 1px solid #ddd; padding: 8px; text-align: left; background: #f9f9f9;">Источник</th>
<th style="border: 1px solid #ddd; padding: 8px; text-align: left; background: #f9f9f9;">Потребители</th>
</tr></thead>
<tbody>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Возврат обработан</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обработка возвратов</td>
<td style="border: 1px solid #ddd; padding: 8px;">КОНЕЧНЫЙ ВЫХОД</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Готовая продукция</td>
<td style="border: 1px solid #ddd; padding: 8px;">Производство</td>
<td style="border: 1px solid #ddd; padding: 8px;">Контроль качества</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Данные о качестве</td>
<td style="border: 1px solid #ddd; padding: 8px;">Учет качества</td>
<td style="border: 1px solid #ddd; padding: 8px;">Анализ качества</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Данные о спросе</td>
<td style="border: 1px solid #ddd; padding: 8px;">ВНЕШНИЙ ВХОД</td>
<td style="border: 1px solid #ddd; padding: 8px;">Закупка материалов</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Жалоба зарегистрирована</td>
<td style="border: 1px solid #ddd; padding: 8px;">Прием жалоб</td>
<td style="border: 1px solid #ddd; padding: 8px;">Расследование жалобы</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Жалоба клиента</td>
<td style="border: 1px solid #ddd; padding: 8px;">ВНЕШНИЙ ВХОД</td>
<td style="border: 1px solid #ddd; padding: 8px;">Прием жалоб</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Жалоба решена</td>
<td style="border: 1px solid #ddd; padding: 8px;">Решение по жалобе</td>
<td style="border: 1px solid #ddd; padding: 8px;">КОНЕЧНЫЙ ВЫХОД</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Заказ закрыт</td>
<td style="border: 1px solid #ddd; padding: 8px;">Закрытие заказа</td>
<td style="border: 1px solid #ddd; padding: 8px;">КОНЕЧНЫЙ ВЫХОД</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Запрос клиента</td>
<td style="border: 1px solid #ddd; padding: 8px;">ВНЕШНИЙ ВХОД</td>
<td style="border: 1px solid #ddd; padding: 8px;">Прием заказа</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Запрос на возврат</td>
<td style="border: 1px solid #ddd; padding: 8px;">ВНЕШНИЙ ВХОД</td>
<td style="border: 1px solid #ddd; padding: 8px;">Обработка возвратов</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Зарезервированный товар</td>
<td style="border: 1px solid #ddd; padding: 8px;">Резервирование товара</td>
<td style="border: 1px solid #ddd; padding: 8px;">Формирование счета, Подготовка к отгрузке</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Информация о наличии</td>
<td style="border: 1px solid #ddd; padding: 8px;">Проверка наличия</td>
<td style="border: 1px solid #ddd; padding: 8px;">Резервирование товара</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Исторические продажи</td>
<td style="border: 1px solid #ddd; padding: 8px;">ВНЕШНИЙ ВХОД</td>
<td style="border: 1px solid #ddd; padding: 8px;">Прогнозирование спроса</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Материалы закуплены</td>
<td style="border: 1px solid #ddd; padding: 8px;">Закупка материалов</td>
<td style="border: 1px solid #ddd; padding: 8px;">Производство</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Оплата получена</td>
<td style="border: 1px solid #ddd; padding: 8px;">Ожидание оплаты</td>
<td style="border: 1px solid #ddd; padding: 8px;">Подготовка к отгрузке</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Остатки на складе</td>
<td style="border: 1px solid #ddd; padding: 8px;">Учет остатков</td>
<td style="border: 1px solid #ddd; padding: 8px;">Планирование закупок</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Отчет о качестве</td>
<td style="border: 1px solid #ddd; padding: 8px;">Анализ качества</td>
<td style="border: 1px solid #ddd; padding: 8px;">Корректирующие действия</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">План закупок</td>
<td style="border: 1px solid #ddd; padding: 8px;">Планирование закупок</td>
<td style="border: 1px solid #ddd; padding: 8px;">КОНЕЧНЫЙ ВЫХОД</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">План улучшений</td>
<td style="border: 1px solid #ddd; padding: 8px;">Корректирующие действия</td>
<td style="border: 1px solid #ddd; padding: 8px;">Закупка материалов</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Подтвержденный заказ</td>
<td style="border: 1px solid #ddd; padding: 8px;">Прием заказа</td>
<td style="border: 1px solid #ddd; padding: 8px;">Проверка наличия</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Получение подтверждено</td>
<td style="border: 1px solid #ddd; padding: 8px;">Подтверждение получения</td>
<td style="border: 1px solid #ddd; padding: 8px;">Закрытие заказа</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Причина жалобы</td>
<td style="border: 1px solid #ddd; padding: 8px;">Расследование жалобы</td>
<td style="border: 1px solid #ddd; padding: 8px;">Решение по жалобе, Учет качества</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Прогноз спроса</td>
<td style="border: 1px solid #ddd; padding: 8px;">Прогнозирование спроса</td>
<td style="border: 1px solid #ddd; padding: 8px;">Планирование закупок</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Сезонность</td>
<td style="border: 1px solid #ddd; padding: 8px;">ВНЕШНИЙ ВХОД</td>
<td style="border: 1px solid #ddd; padding: 8px;">Прогнозирование спроса</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Счет на оплату</td>
<td style="border: 1px solid #ddd; padding: 8px;">Формирование счета</td>
<td style="border: 1px solid #ddd; padding: 8px;">Отправка счета</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Счет отправлен</td>
<td style="border: 1px solid #ddd; padding: 8px;">Отправка счета</td>
<td style="border: 1px solid #ddd; padding: 8px;">Ожидание оплаты</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Товар доставлен</td>
<td style="border: 1px solid #ddd; padding: 8px;">Отслеживание доставки</td>
<td style="border: 1px solid #ddd; padding: 8px;">Подтверждение получения</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Товар на складе</td>
<td style="border: 1px solid #ddd; padding: 8px;">Поступление на склад</td>
<td style="border: 1px solid #ddd; padding: 8px;">Учет остатков</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Товар передан в доставку</td>
<td style="border: 1px solid #ddd; padding: 8px;">Оформление доставки</td>
<td style="border: 1px solid #ddd; padding: 8px;">Отслеживание доставки</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Товар проверен</td>
<td style="border: 1px solid #ddd; padding: 8px;">Контроль качества</td>
<td style="border: 1px solid #ddd; padding: 8px;">Поступление на склад</td>
</tr>
<tr style="background: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 8px;">Товар продан</td>
<td style="border: 1px solid #ddd; padding: 8px;">ВНЕШНИЙ ВХОД</td>
<td style="border: 1px solid #ddd; padding: 8px;">Учет остатков</td>
</tr>
<tr style="background: #fff;">
<td style="border: 1px solid #ddd; padding: 8px;">Товар упакован</td>
<td style="border: 1px solid #ddd; padding: 8px;">Подготовка к отгрузке</td>
<td style="border: 1px solid #ddd; padding: 8px;">Оформление доставки</td>
</tr>
</tbody></table>
            </div>
        </div>
    </div>

    <script>
        // Минималистичная конфигурация Mermaid
        const mermaidConfig = {
            startOnLoad: true,
            theme: 'default',
            securityLevel: 'loose',
            fontFamily: 'Arial, sans-serif',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis',
                padding: 15,
                rankSpacing: 40,
                nodeSpacing: 80,
                rankSep: 80,
                wrap: true,
                wrappingWidth: 150
            }
        };

        // Состояние навигации
        let scale = 1.0;
        let isDragging = false;
        let startX, startY, startScrollX, startScrollY;
        
        // Элементы DOM
        const diagramContainer = document.getElementById('diagramContainer');
        const mermaidElement = document.getElementById('mermaid-diagram');
        const zoomInfo = document.getElementById('zoomInfo');
        
        // Инициализация при загрузке
        document.addEventListener('DOMContentLoaded', async function() {
            // Инициализация Mermaid
            mermaid.initialize(mermaidConfig);
            
            try {
                // Переинициализация Mermaid для преобразования диаграммы
                await mermaid.run({ querySelector: '.mermaid' });
                
                // После рендеринга Mermaid подгоняем диаграмму под экран
                setTimeout(() => {
                    fitToScreen();
                    setupNavigation();
                }, 100);
                
            } catch (error) {
                console.error('Ошибка рендеринга Mermaid:', error);
            }
        });
        
        function setupNavigation() {
            // Перетаскивание для панорамирования
            diagramContainer.addEventListener('mousedown', startDragging);
            document.addEventListener('mousemove', drag);
            document.addEventListener('mouseup', stopDragging);
            
            // Масштабирование колесом мыши
            diagramContainer.addEventListener('wheel', onWheel, { passive: false });
            
            // Обработка клавиатуры
            document.addEventListener('keydown', onKeyDown);
        }
        
        function startDragging(e) {
            if (e.button === 0) { // Левая кнопка мыши
                isDragging = true;
                diagramContainer.classList.add('dragging');
                startX = e.clientX;
                startY = e.clientY;
                startScrollX = diagramContainer.scrollLeft;
                startScrollY = diagramContainer.scrollTop;
                e.preventDefault();
            }
        }
        
        function drag(e) {
            if (!isDragging) return;
            
            const deltaX = e.clientX - startX;
            const deltaY = e.clientY - startY;
            
            diagramContainer.scrollLeft = startScrollX - deltaX;
            diagramContainer.scrollTop = startScrollY - deltaY;
            
            e.preventDefault();
        }
        
        function stopDragging() {
            isDragging = false;
            diagramContainer.classList.remove('dragging');
        }
        
        function onWheel(e) {
            e.preventDefault();
            
            const rect = diagramContainer.getBoundingClientRect();
            const mouseX = e.clientX - rect.left;
            const mouseY = e.clientY - rect.top;
            
            // Сохраняем текущую позицию скролла
            const scrollX = diagramContainer.scrollLeft;
            const scrollY = diagramContainer.scrollTop;
            
            const delta = -Math.sign(e.deltaY) * (e.ctrlKey ? 0.05 : 0.1);
            const newScale = Math.max(0.1, Math.min(10, scale + delta)); // УВЕЛИЧЕНО ДО 1000%
            
            if (newScale !== scale) {
                const oldScale = scale;
                scale = newScale;
                updateScale();
                updateZoomInfo();
                
                // Корректируем скролл для сохранения позиции под курсором
                const scaleRatio = newScale / oldScale;
                diagramContainer.scrollLeft = mouseX * scaleRatio - (mouseX - scrollX);
                diagramContainer.scrollTop = mouseY * scaleRatio - (mouseY - scrollY);
            }
        }
        
        function onKeyDown(e) {
            // Горячие клавиши для масштабирования
            if ((e.ctrlKey || e.metaKey) && !e.altKey) {
                if (e.key === '=' || e.key === '+') {
                    e.preventDefault();
                    zoomIn();
                } else if (e.key === '-') {
                    e.preventDefault();
                    zoomOut();
                } else if (e.key === '0') {
                    e.preventDefault();
                    resetView();
                } else if (e.key === '1') {
                    e.preventDefault();
                    fitToScreen();
                }
            }
            
            // Escape для выхода из режима перетаскивания
            if (e.key === 'Escape' && isDragging) {
                stopDragging();
            }
        }
        
        function zoomIn() {
            const rect = diagramContainer.getBoundingClientRect();
            const centerX = rect.width / 2;
            const centerY = rect.height / 2;
            
            const scrollX = diagramContainer.scrollLeft;
            const scrollY = diagramContainer.scrollTop;
            
            const oldScale = scale;
            scale = Math.min(10, scale + 0.1); // УВЕЛИЧЕНО ДО 1000%
            updateScale();
            updateZoomInfo();
            
            // Корректируем скролл для сохранения центра
            const scaleRatio = scale / oldScale;
            diagramContainer.scrollLeft = centerX * scaleRatio - (centerX - scrollX);
            diagramContainer.scrollTop = centerY * scaleRatio - (centerY - scrollY);
        }
        
        function zoomOut() {
            const rect = diagramContainer.getBoundingClientRect();
            const centerX = rect.width / 2;
            const centerY = rect.height / 2;
            
            const scrollX = diagramContainer.scrollLeft;
            const scrollY = diagramContainer.scrollTop;
            
            const oldScale = scale;
            scale = Math.max(0.1, scale - 0.1);
            updateScale();
            updateZoomInfo();
            
            // Корректируем скролл для сохранения центра
            const scaleRatio = scale / oldScale;
            diagramContainer.scrollLeft = centerX * scaleRatio - (centerX - scrollX);
            diagramContainer.scrollTop = centerY * scaleRatio - (centerY - scrollY);
        }
        
        function resetView() {
            scale = 1.0;
            updateScale();
            updateZoomInfo();
            centerDiagram();
        }
        
        function fitToScreen() {
            const svg = mermaidElement.querySelector('svg');
            if (!svg) return;
            
            const container = diagramContainer;
            const svgRect = svg.getBoundingClientRect();
            const containerRect = container.getBoundingClientRect();
            
            // Вычисляем масштаб для вписывания диаграммы в контейнер
            const scaleX = containerRect.width / svgRect.width;
            const scaleY = containerRect.height / svgRect.height;
            const fitScale = Math.min(scaleX, scaleY) * 0.9;
            
            scale = Math.max(0.1, Math.min(1.0, fitScale));
            updateScale();
            updateZoomInfo();
            centerDiagram();
        }
        
        function centerDiagram() {
            const svg = mermaidElement.querySelector('svg');
            if (!svg) return;
            
            const svgRect = svg.getBoundingClientRect();
            const container = diagramContainer;
            
            diagramContainer.scrollLeft = (svgRect.width * scale - container.clientWidth) / 2;
            diagramContainer.scrollTop = (svgRect.height * scale - container.clientHeight) / 2;
        }
        
        function updateScale() {
            const svg = mermaidElement.querySelector('svg');
            if (svg) {
                svg.style.transform = `scale(${scale})`;
                svg.style.transformOrigin = '0 0';
            }
        }
        
        function updateZoomInfo() {
            const percentage = Math.round(scale * 100);
            zoomInfo.textContent = `${percentage}%`;
        }
        
        function downloadPNG() {
            const svg = mermaidElement.querySelector('svg');
            if (!svg) {
                alert('SVG элемент не найден');
                return;
            }
            
            // Создаем временный контейнер для рендеринга
            const tempContainer = document.createElement('div');
            tempContainer.style.position = 'absolute';
            tempContainer.style.left = '-9999px';
            tempContainer.style.top = '-9999px';
            tempContainer.style.backgroundColor = 'white';
            tempContainer.style.padding = '30px';
            
            // Клонируем SVG и сбрасываем трансформацию для полного размера
            const clonedSvg = svg.cloneNode(true);
            clonedSvg.style.transform = 'scale(1)';
            clonedSvg.style.transformOrigin = '0 0';
            
            tempContainer.appendChild(clonedSvg);
            document.body.appendChild(tempContainer);
            
            html2canvas(tempContainer, {
                backgroundColor: '#ffffff',
                scale: 2,
                useCORS: true,
                allowTaint: false,
                logging: false
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = 'business_process_diagram.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
                document.body.removeChild(tempContainer);
            }).catch(error => {
                console.error('Ошибка при создании PNG:', error);
                document.body.removeChild(tempContainer);
                alert('Ошибка при создании PNG файла');
            });
        }
        
        // Обработка изменения размера окна
        window.addEventListener('resize', function() {
            setTimeout(updateZoomInfo, 100);
        });
    </script>
</body>
</html>