sincos.cc-website/website/static/tool-sequence-diagram.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sequence-Diagram 时序图设计器 - 人工智能工程技术研究-江北的渔夫</title>
<meta name="description" content="时序图设计 · Sequence Diagram Studio —— 面向 PLC 流程节拍与相位角设计的桌面软件：条形节拍、圆周节拍、流程图三视图共享一份数据，泳道加宽、drawio / SVG / PNG 导出，支持 Windows 桌面与 Android 平板。">
<meta name="keywords" content="Sequence-Diagram, 时序图设计, PLC 节拍, 相位角, 圆周节拍, 流程图, drawio, Flutter, Android">
<link rel="stylesheet" href="/static/css/style.css">
<link rel="icon" href="/static/img/logo.svg" type="image/svg+xml">
<script src="/static/js/nav.js"></script>
</head>
<body>

<header class="site-header">
  <div class="container header-inner">
    <a class="brand" href="/">
      <img src="/static/img/logo.svg" alt="EDC|江北的渔夫">
      <span class="brand-name">EDC|江北的渔夫</span>
    </a>
    <nav class="main-nav" id="mainNav">
      <div class="nav-item has-dropdown">
        <a class="nav-link" href="/research/">前沿技术研究</a>
        <button class="nav-caret" type="button" aria-label="展开前沿技术研究">▾</button>
        <div class="dropdown">
          <a href="http://124.220.63.9:25000">Research Digest</a>
          <a href="/research/neural/">Neural Research</a>
          <a href="/research/reslib/">ResLib</a>
        </div>
      </div>
      <div class="nav-item has-dropdown">
        <a class="nav-link active" href="/tools/">工具开发</a>
        <button class="nav-caret" type="button" aria-label="展开工具开发">▾</button>
        <div class="dropdown">
          <a class="active" href="/tools/sequence-diagram/">Sequence-Diagram</a>
          <a href="/tools/uni-viewer/">Uni-Viewer</a>
          <a href="/tools/serial-terminal/">Serial Terminal</a>
          <a href="/tools/enthalpy-diagram/">Enthalpy Diagram</a>
          <a href="/tools/edc-lite-erp/">EDC Lite ERP</a>
          <a href="/tools/physics-ai-fluent/">Physics AI Fluent</a>
        </div>
      </div>
      <div class="nav-item has-dropdown">
        <a class="nav-link" href="/license/">License</a>
        <button class="nav-caret" type="button" aria-label="展开 License">▾</button>
        <div class="dropdown">
          <a href="/license/apply">申请 License</a>
          <a href="/license/status">查询 / 下载</a>
          <a href="/license/package">资源包获取</a>
        </div>
      </div>
      <a class="nav-link" href="/blog/">博客</a>
    </nav>
    <button class="nav-toggle" id="navToggle" aria-label="菜单">☰</button>
  </div>
</header>

<main>
  <section class="page-hero">
    <div class="container">
      <p class="hero-eyebrow">工具开发 · 主力项目 · FLUTTER DESKTOP / ANDROID</p>
      <h1>时序图设计 · Sequence Diagram Studio</h1>
      <p class="page-hero-sub">面向 PLC 流程节拍设计与相位角设计的专业设计软件：条形节拍、圆周节拍、流程图三视图共享同一份数据，泳道加宽、依赖关系与关键路径一目了然，drawio / SVG / PNG 一键导出。</p>
      <div class="hero-actions">
        <a href="http://124.220.63.9:30000/admin/Sequence-Diagram" class="btn btn-light">项目主页（Gitea）</a>
        <a href="/tools/" class="btn btn-outline-light">返回工具开发</a>
      </div>
      <div class="hero-stats">
        <div class="hero-stat"><b>V1.3.4</b><span>桌面版 · Windows 正式版</span></div>
        <div class="hero-stat"><b>三视图</b><span>条形 / 圆周 / 流程图</span></div>
        <div class="hero-stat"><b>1000+</b><span>动作仍保持 60 fps</span></div>
        <div class="hero-stat"><b>Android</b><span>平板版（应用商店分发）</span></div>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <div class="section-head">
        <h2 class="section-title">已实现功能</h2>
        <p class="section-desc">从节拍建模、拖拽编辑到导出交付，覆盖 PLC 工艺设计的完整工作流。</p>
      </div>
      <div class="grid">
        <div class="card"><div class="icon">⇄</div><h3>三视图，一份数据</h3><p>条形节拍（甘特 / 流程图 + 依赖箭头）、圆周节拍（同心圆相位图，12 点钟起始）、流程图三视图共享同一份数据，顶部一键切换。</p></div>
        <div class="card"><div class="icon">↦</div><h3>顺序一目了然</h3><p>绿色实线箭头 = FS 严格顺序（完成后启动），琥珀虚线 = SS 并行重叠（可提前启动），关键路径带 ★ 高亮。</p></div>
        <div class="card"><div class="icon">▥</div><h3>泳道加宽（多槽位）</h3><p>一个泳道可分 1–5 个槽位：条形分多条子行、圆周分多条同心子环、流程图分多条子列；拖拽动作同时支持换道 + 换槽位。</p></div>
        <div class="card"><div class="icon">☰</div><h3>空泳道策略</h3><p>泳道动作全部移走后，可「保留空泳道（默认，序号不变）」或「自动移除（序号顺延）」，F2 文档设置中切换。</p></div>
        <div class="card"><div class="icon">✎</div><h3>拖拽编辑与工位管理</h3><p>拖拽编辑相位、拖端点改持续角、Shift + 拖拽改层、双击新建动作；工位可增删、改名、调色、排序。</p></div>
        <div class="card"><div class="icon">⤓</div><h3>drawio / SVG / PNG 导出</h3><p>SVG 矢量、分层、带语义 id 与 data-* 元数据，可直接进工艺卡与 MES；PNG 按 2 倍像素比导出；另支持 drawio 导出。</p></div>
        <div class="card"><div class="icon">◷</div><h3>文档设置与自动保存</h3><p>F2 文档设置统一管理单位（ms / s / min）、相位（° / %）、精度、换算表、泳道与吸附；自动保存每 1/5/10/30 分钟可选。</p></div>
        <div class="card"><div class="icon">▦</div><h3>节拍统计</h3><p>循环周期 / 动作数 / 关键路径 / 最大并行度 / 相位覆盖率 / 瓶颈工位，只展示可由项目数据推导的指标。</p></div>
        <div class="card"><div class="icon">⚡</div><h3>响应快</h3><p>自研 Canvas 渲染，双层缓存 + 脏区重绘 + 空间索引，1000 个动作仍保持 60 fps。</p></div>
        <div class="card"><div class="icon">☀</div><h3>深色 / 浅色双主题</h3><p>一键切换（F3），语义颜色不变，导出 SVG 与屏幕一致。</p></div>
        <div class="card"><div class="icon">⛨</div><h3>可靠性与帮助</h3><p>自动定时快照 + 启动崩溃恢复 + .bak 备份；应用内帮助中心（F1）与完整使用文档。</p></div>
        <div class="card"><div class="icon">◎</div><h3>开放授权版本</h3><p>桌面版自 1.3.4 起导出 SVG / PNG / drawio 无需 .lic，关于页显示「开放授权版本」。</p></div>
      </div>
    </div>
  </section>

  <section class="section section-alt">
    <div class="container">
      <div class="section-head">
        <h2 class="section-title">Android 平板版</h2>
        <p class="section-desc">与桌面版同源的移动版本，面向平板现场使用，已按应用商店标准分发。</p>
      </div>
      <div class="grid">
        <div class="card"><div class="icon">▭</div><h3>目标分辨率</h3><p>1280 × 800dp（2560 × 1600 物理），动态兼容横竖屏与其它分辨率；包名 cc.sincos.sequence_diagram，应用名「时序图设计」。</p></div>
        <div class="card"><div class="icon">✜</div><h3>触控手势</h3><p>单指点选动作、按住整体拖动；选中后两端白色把手拖动改时长；双指捏合缩放 / 平移（以捏合焦点为锚点）；全屏无黑边。</p></div>
        <div class="card"><div class="icon">⤓</div><h3>文件与导出</h3><p>工程 / SVG / PNG 保存到系统公共目录（默认 Documents/SequenceDiagram，可更改位置）；导出固定 1920 × 1080，与桌面版一致。</p></div>
        <div class="card"><div class="icon">⛨</div><h3>正式签名</h3><p>release 使用独立 keystore 签名，更新安装无需卸载重装；无 license 授权限制，直接面向应用商店分发。</p></div>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <h2 class="section-title">界面实录</h2>
      <p class="section-desc">桌面版 2560 × 1440 与 Android 平板版实际运行界面。</p>
      <div class="gallery">
        <figure class="shot wide">
          <img src="/static/img/sequence/bar-timing.jpg" alt="条形节拍视图 - 深色主题">
          <figcaption>条形节拍视图（甘特 / 流程图 + FS/SS 依赖箭头 + 关键路径）—— 深色主题</figcaption>
        </figure>
        <figure class="shot wide">
          <img src="/static/img/sequence/circular-timing.jpg" alt="圆周节拍视图 - 深色主题">
          <figcaption>圆周节拍视图（同心圆 · 12 点钟起始 · 顺时针）—— 深色主题</figcaption>
        </figure>
        <figure class="shot wide">
          <img src="/static/img/sequence/unit-settings.jpg" alt="文档设置面板">
          <figcaption>文档设置（F2）—— 单位与精度 / 循环与相位 / 泳道 / 自动保存 / 换算表 / 编辑辅助</figcaption>
        </figure>
        <figure class="shot wide">
          <img src="/static/img/sequence/bar-timing-light.jpg" alt="条形节拍视图 - 浅色主题">
          <figcaption>条形节拍视图 —— 浅色主题</figcaption>
        </figure>
        <figure class="shot">
          <img src="/static/img/sequence/tablet-bar-dark.jpg" alt="Android 平板版 - 条形节拍">
          <figcaption>Android 平板版 —— 条形节拍视图（深色）</figcaption>
        </figure>
        <figure class="shot">
          <img src="/static/img/sequence/tablet-circular-dark.jpg" alt="Android 平板版 - 圆周节拍">
          <figcaption>Android 平板版 —— 圆周节拍视图（深色）</figcaption>
        </figure>
      </div>
    </div>
  </section>
</main>

<footer class="site-footer">
  <div class="container footer-inner">
    <div class="footer-brand">
      <img src="/static/img/logo.svg" alt="">
      <span>Easy Design Collection</span>
    </div>
    <span>Copyright &copy; 2026 Easy Design Collection. All rights reserved.</span>
    <span class="footer-links">
      <a href="/resources/">内部研究</a><span class="sep">·</span>
      <a href="/license/">License</a><span class="sep">·</span>
      <a href="/admin">管理页面</a><span class="sep">·</span>
      <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">苏ICP备2026056863号</a>
    </span>
  </div>
</footer>

</body>
</html>