مخطط تدفق الإجراء الأول
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 820" width="100%" height="100%">
  <defs>
    <!-- Drop Shadow Filter -->
    <filter id="shadow" x="-10%" y="-10%" width="130%" height="130%">
      <feDropShadow dx="2" dy="4" stdDeviation="4" flood-color="#0F172A" flood-opacity="0.08"/>
    </filter>

    <!-- Gradients -->
    <linearGradient id="navyGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#1B2A4A"/>
      <stop offset="100%" stop-color="#0F172A"/>
    </linearGradient>

    <linearGradient id="goldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#D4AF37"/>
      <stop offset="100%" stop-color="#B8860B"/>
    </linearGradient>

    <!-- Arrow Markers -->
    <marker id="arrowNavy" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M 0 1 L 10 5 L 0 9 z" fill="#1B2A4A"/>
    </marker>
    <marker id="arrowGold" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M 0 1 L 10 5 L 0 9 z" fill="#D4AF37"/>
    </marker>
  </defs>

  <style>
    .bg { fill: #FFFFFF; }
    .text-title { font-family: 'Tajawal', 'Cairo', sans-serif; font-weight: 700; fill: #FFFFFF; font-size: 15px; text-anchor: middle; dominant-baseline: central; }
    .text-dark { font-family: 'Tajawal', 'Cairo', sans-serif; font-weight: 600; fill: #1B2A4A; font-size: 14px; text-anchor: middle; dominant-baseline: central; }
    .text-gold { font-family: 'Tajawal', 'Cairo', sans-serif; font-weight: 700; fill: #B8860B; font-size: 13px; text-anchor: middle; dominant-baseline: central; }
    .text-node { font-family: 'Tajawal', 'Cairo', sans-serif; font-weight: 600; fill: #1B2A4A; font-size: 14px; text-anchor: middle; dominant-baseline: central; }
    .line-navy { stroke: #1B2A4A; stroke-width: 2; fill: none; marker-end: url(#arrowNavy); }
    .line-gold { stroke: #D4AF37; stroke-width: 2; fill: none; marker-end: url(#arrowGold); }
  </style>

  <!-- Background -->
  <rect class="bg" width="100%" height="100%"/>

  <!-- Start Node -->
  <g filter="url(#shadow)">
    <rect x="330" y="30" width="140" height="44" rx="22" fill="url(#goldGrad)"/>
    <text x="400" y="52" class="text-title">البداية</text>
  </g>

  <path d="M 400 74 L 400 108" class="line-navy"/>

  <!-- Step 1 -->
  <g filter="url(#shadow)">
    <rect x="180" y="110" width="440" height="52" rx="8" fill="#F8FAFC" stroke="#1B2A4A" stroke-width="1.5"/>
    <text x="400" y="136" class="text-node">استلام المعاملة المكتملة وقيدها بسجل الورود</text>
  </g>

  <path d="M 400 162 L 400 196" class="line-navy"/>

  <!-- Step 2 -->
  <g filter="url(#shadow)">
    <rect x="180" y="198" width="440" height="52" rx="8" fill="#F8FAFC" stroke="#1B2A4A" stroke-width="1.5"/>
    <text x="400" y="224" class="text-node">مراجعة وفلترة اكتمال الوثائق والمستندات</text>
  </g>

  <path d="M 400 250 L 400 284" class="line-navy"/>

  <!-- Decision 1 -->
  <g filter="url(#shadow)">
    <polygon points="400,286 550,330 400,374 250,330" fill="#FFFFFF" stroke="#D4AF37" stroke-width="2"/>
    <text x="400" y="330" class="text-dark">هل الوثائق أساسية ومكتملة؟</text>
  </g>

  <!-- Branch NO -->
  <path d="M 250 330 L 140 330 L 140 398" class="line-gold"/>
  <rect x="155" y="315" width="30" height="20" rx="4" fill="#F1F5F9"/>
  <text x="170" y="325" class="text-gold">لا</text>

  <g filter="url(#shadow)">
    <rect x="30" y="400" width="220" height="60" rx="8" fill="#FFFBEB" stroke="#D4AF37" stroke-width="1.5"/>
    <text x="140" y="420" class="text-dark">إرسال مذكرة طلب استكمال</text>
    <text x="140" y="440" class="text-dark">وتعليق التحضير مؤقتاً</text>
  </g>

  <!-- Branch YES -->
  <path d="M 400 374 L 400 428" class="line-navy"/>
  <rect x="410" y="382" width="30" height="20" rx="4" fill="#F1F5F9"/>
  <text x="425" y="392" class="text-gold">نعم</text>

  <!-- Step 3 -->
  <g filter="url(#shadow)">
    <rect x="270" y="430" width="480" height="56" rx="8" fill="#F8FAFC" stroke="#1B2A4A" stroke-width="1.5"/>
    <text x="510" y="448" class="text-node">حصر وتحديد المرجعيات والنصوص القانونية</text>
    <text x="510" y="468" class="text-node">الحاكمة للموضوع</text>
  </g>

  <path d="M 510 486 L 510 528" class="line-navy"/>

  <!-- Step 4 -->
  <g filter="url(#shadow)">
    <rect x="290" y="530" width="440" height="52" rx="8" fill="#F8FAFC" stroke="#1B2A4A" stroke-width="1.5"/>
    <text x="510" y="556" class="text-node">إعداد وتخصيص قائمة الفحص المرجعية</text>
  </g>

  <path d="M 510 582 L 510 624" class="line-navy"/>

  <!-- Step 5 -->
  <g filter="url(#shadow)">
    <rect x="290" y="626" width="440" height="52" rx="8" fill="#F8FAFC" stroke="#1B2A4A" stroke-width="1.5"/>
    <text x="510" y="652" class="text-node">تجميع ملف التحضير واعتماده رسمياً</text>
  </g>

  <path d="M 510 678 L 510 720" class="line-navy"/>

  <!-- End Node -->
  <g filter="url(#shadow)">
    <rect x="440" y="722" width="140" height="44" rx="22" fill="url(#navyGrad)"/>
    <text x="510" y="744" class="text-title">الإحالة للفحص</text>
  </g>

</svg>

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLRunner</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background: #f0f4f8;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      color: #333;
    }
    .card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      max-width: 500px;
      width: 100%;
      overflow: hidden;
    }
    .header {
      background: linear-gradient(135deg, #1e3a5f, #2563eb);
      color: white;
      padding: 24px;
    }
    h1 { margin: 0; font-size: 24px; }
    .badge {
      background: rgba(255,255,255,0.2);
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 12px;
      float: right;
    }
    .content { padding: 24px; }
    ul { line-height: 1.8; color: #555; }
    .btn {
      background: #2563eb; color: white; border: none;
      padding: 10px 20px; border-radius: 6px; cursor: pointer;
      font-size: 16px; width: 100%; margin-top: 20px;
    }
    .btn:hover { background: #1d4ed8; }
    #output { margin-top: 16px; text-align: center; color: #2563eb; font-weight: 500; }
  </style>
</head>
<body>
  <div class="card">
    <div class="header">
      <h1>Welcome to HTMLRunner</h1>
      <div class="badge">Live Preview</div>
    </div>
    <div class="content">
      <p>Write HTML in the first tab, style it with CSS in the second, add JS in the third.</p>
      <ul>
        <li>Edit any tab and click Run</li>
        <li>Open in New Tab for full view</li>
        <li>Export to download as .html</li>
      </ul>
      <button class="btn" id="actionBtn">Click Me!</button>
      <p id="output"></p>
    </div>
  </div>
  <script>
    document.getElementById('actionBtn').addEventListener('click', function() {
      var output = document.getElementById('output');
      var count = (output._count || 0) + 1;
      output._count = count;
      output.textContent = 'You clicked ' + count + ' times!';
    });
  </script>
<div style="position:fixed;bottom:0;left:0;right:0;z-index:9999;height:20px;line-height:20px;text-align:center;background:#1e3a5f;font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#94a3b8">Hosted &amp; Compiled with <a href="https://htmlrunner.com/" target="_blank" rel="noopener" style="color:#ffffff;text-decoration:none;font-weight:600">HtmlRunner.com</a></div>
<script src="script.js"></script>
</body>
</html>