使用靜態html繪製流程圖

DogLeftover發表於2024-11-29
HTML流程圖

方案一

  • 使用svg
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flowchart Example</title>
    <style>
        .flowchart {
            text-align: center;
        }
        .flowchart svg {
            width: 100%;
            max-width: 600px;
            margin: auto;
        }
        .flowchart rect {
            fill: #fff;
            stroke: #000;
            stroke-width: 2px;
        }
        .flowchart text {
            text-align: center;
            font-family: Arial, sans-serif;
            font-size: 14px;
        }
        .flowchart line {
            stroke: #000;
            stroke-width: 2px;
        }
    </style>
</head>
<body>
    <div class="flowchart">
        <svg height="200" xmlns="http://www.w3.org/2000/svg">
            <!-- Start Node -->
            <rect x="50" y="30" width="100" height="50" rx="10" ry="10"/>
            <text x="100" y="50" dy=".35em">Start</text>

            <!-- Process Node -->
            <rect x="200" y="30" width="100" height="50" rx="10" ry="10"/>
            <text x="250" y="50" dy=".35em">Process</text>

            <!-- Decision Node -->
            <polygon points="350,30 400,80 350,130" fill="#fff" stroke="#000" stroke-width="2"/>
            <text x="350" y="70" dy=".35em" text-anchor="middle">Decision</text>
            <text x="350" y="110" dy=".35em" text-anchor="middle">?</text>

            <!-- Yes Path -->
            <rect x="200" y="150" width="100" height="50" rx="10" ry="10"/>
            <text x="250" y="170" dy=".35em">Yes</text>

            <!-- No Path -->
            <rect x="500" y="150" width="100" height="50" rx="10" ry="10"/>
            <text x="550" y="170" dy=".35em">No</text>

            <!-- Lines -->
            <line x1="150" y1="55" x2="195" y2="55" stroke="#000" stroke-width="2"/>
            <line x1="300" y1="55" x2="345" y2="55" stroke="#000" stroke-width="2"/>
            <line x1="345" y1="80" x2="345" y2="125" stroke="#000" stroke-width="2" stroke-dasharray="5,5"/>
            <line x1="345" y1="125" x2="295" y2="175" stroke="#000" stroke-width="2"/>
            <line x1="345" y1="80" x2="445" y2="125" stroke="#000" stroke-width="2" stroke-dasharray="5,5"/>
            <line x1="445" y1="125" x2="495" y2="175" stroke="#000" stroke-width="2"/>
        </svg>
    </div>
</body>
</html>
  • 效果圖
點選檢視詳情

方案二

  • 使用工具drawio，繪製完成後匯出就是html，也可再匯入進行編輯修改

相關文章