bardd commited on
Commit
48c0f3a
·
verified ·
1 Parent(s): a4138cd

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +857 -19
index.html CHANGED
@@ -1,19 +1,857 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Our Dify-Powered Agentic Platform — Team Explainer</title>
7
+ <style>
8
+ :root{
9
+ --ink:#14213d;--muted:#5d6b82;--paper:#fffdf8;--card:#ffffff;
10
+ --blue:#4f7cff;--purple:#7c5cff;--cyan:#18b7d4;--green:#29b473;
11
+ --orange:#ff9f43;--red:#ee5d68;--yellow:#ffd166;--pink:#ef6fb5;
12
+ --line:#dce5f2;--soft:#f3f7fc;--navy:#15203b;
13
+ --shadow:0 12px 30px rgba(26,45,82,.10);
14
+ }
15
+ *{box-sizing:border-box}
16
+ html{scroll-behavior:smooth}
17
+ body{
18
+ margin:0;background:
19
+ linear-gradient(180deg,#f7fbff 0,#fffdf8 23rem,#fffdf8 100%);
20
+ color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
21
+ line-height:1.6;
22
+ }
23
+ a{color:#315bd8;text-decoration:none}
24
+ a:hover{text-decoration:underline}
25
+ .container{max-width:1180px;margin:auto;padding:0 22px}
26
+ .hero{padding:52px 0 32px;position:relative;overflow:hidden}
27
+ .hero:before,.hero:after{content:"";position:absolute;border-radius:999px;filter:blur(0);opacity:.22;z-index:-1}
28
+ .hero:before{width:320px;height:320px;background:#6d5cff;right:-80px;top:-90px}
29
+ .hero:after{width:240px;height:240px;background:#18b7d4;left:-90px;top:100px}
30
+ .badge{
31
+ display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border-radius:999px;
32
+ background:#edf3ff;border:1px solid #cfddff;color:#315bd8;font-weight:800;font-size:.84rem;
33
+ }
34
+ h1{font-size:clamp(2.25rem,5vw,5rem);line-height:.98;letter-spacing:-.055em;margin:18px 0 20px;max-width:1000px}
35
+ h1 span{color:var(--purple)}
36
+ .lead{font-size:clamp(1.06rem,1.8vw,1.35rem);max-width:900px;color:var(--muted)}
37
+ .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;margin-top:35px}
38
+ @media(max-width:860px){.hero-grid{grid-template-columns:1fr}}
39
+ .paper{
40
+ background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);
41
+ }
42
+ .hero-card{padding:18px}
43
+ .note{
44
+ padding:16px 18px;border-radius:16px;background:#fff8dc;border:1px solid #ffe29a;color:#684e00;
45
+ }
46
+ .toc{
47
+ position:sticky;top:0;z-index:30;background:rgba(255,253,248,.94);backdrop-filter:blur(12px);
48
+ border-top:1px solid #edf1f7;border-bottom:1px solid #dde4ef;
49
+ }
50
+ .toc-inner{display:flex;gap:10px;overflow:auto;padding:11px 0;scrollbar-width:none}
51
+ .toc a{
52
+ white-space:nowrap;padding:8px 11px;border-radius:10px;color:#40506b;font-weight:800;font-size:.83rem;
53
+ background:#fff;border:1px solid #e0e7f1;
54
+ }
55
+ section{padding:58px 0}
56
+ .kicker{text-transform:uppercase;letter-spacing:.13em;font-weight:900;color:var(--purple);font-size:.77rem}
57
+ h2{font-size:clamp(1.8rem,3.4vw,3.15rem);letter-spacing:-.04em;line-height:1.05;margin:8px 0 15px}
58
+ h3{font-size:1.27rem;margin:0 0 8px}
59
+ .section-intro{color:var(--muted);font-size:1.05rem;max-width:900px;margin-bottom:26px}
60
+ .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
61
+ .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
62
+ .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
63
+ @media(max-width:900px){.grid4,.grid3{grid-template-columns:repeat(2,1fr)}}
64
+ @media(max-width:650px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
65
+ .card{background:white;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 7px 22px rgba(24,46,88,.06)}
66
+ .icon{
67
+ width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
68
+ background:#eef3ff;font-size:1.5rem;margin-bottom:12px;border:1px solid #d7e2ff
69
+ }
70
+ .pill{display:inline-block;padding:4px 9px;border-radius:999px;background:#f0f4fb;color:#51627b;font-size:.77rem;font-weight:900}
71
+ .good{background:#ebfbf3;border-color:#c6efd9}
72
+ .warn{background:#fff6e8;border-color:#ffddb2}
73
+ .bad{background:#fff0f0;border-color:#fac8cc}
74
+ .good .icon{background:#dcf8ea}.warn .icon{background:#ffefd4}.bad .icon{background:#ffe2e4}
75
+ .big-idea{padding:26px;background:linear-gradient(120deg,#17223e,#283b72);color:white;border-radius:24px;box-shadow:var(--shadow)}
76
+ .big-idea strong{color:#ffd166}
77
+ .checklist{display:grid;gap:11px;margin:0;padding:0;list-style:none}
78
+ .checklist li{display:flex;gap:10px;align-items:flex-start}
79
+ .checklist li:before{content:"✓";flex:0 0 25px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#daf5e7;color:#137548;font-weight:900}
80
+ .xlist li:before{content:"×";background:#ffe1e3;color:#b2323c}
81
+ .diagram{padding:18px;background:#fbfdff;border:1px solid #dfe8f5;border-radius:22px;overflow:auto}
82
+ .diagram svg{display:block;width:100%;height:auto;min-width:680px}
83
+ .caption{color:var(--muted);font-size:.88rem;margin-top:9px}
84
+ .callout{border-left:5px solid var(--blue);padding:16px 18px;background:#f4f7ff;border-radius:0 14px 14px 0;margin:22px 0}
85
+ .callout.orange{border-left-color:var(--orange);background:#fff7ea}
86
+ .callout.green{border-left-color:var(--green);background:#effbf5}
87
+ .callout.red{border-left-color:var(--red);background:#fff2f3}
88
+ .compare{width:100%;border-collapse:separate;border-spacing:0;background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden}
89
+ .compare th,.compare td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
90
+ .compare th{background:#f3f6fb;color:#31415d;font-size:.84rem;text-transform:uppercase;letter-spacing:.05em}
91
+ .compare tr:last-child td{border-bottom:0}
92
+ .num{
93
+ width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#263968;color:white;font-weight:900;flex:0 0 38px
94
+ }
95
+ .step{display:flex;gap:15px;align-items:flex-start}
96
+ .step+.step{margin-top:19px}
97
+ .timeline{position:relative;padding-left:12px}
98
+ .timeline:before{content:"";position:absolute;left:30px;top:24px;bottom:24px;width:3px;background:#dfe7f5}
99
+ .timeline .step{position:relative}
100
+ .timeline .num{z-index:2}
101
+ .node-chip{display:inline-block;border:1px solid #dce4f0;background:white;border-radius:10px;padding:5px 8px;margin:3px;font-size:.78rem;font-weight:800}
102
+ .legend{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}
103
+ .legend span{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#52627b;font-weight:800}
104
+ .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
105
+ .code{
106
+ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#10182b;color:#eaf1ff;border-radius:15px;padding:16px;overflow:auto;font-size:.86rem
107
+ }
108
+ .quote{font-size:1.25rem;font-weight:900;letter-spacing:-.02em;color:#293a5b}
109
+ .footer{padding:36px 0 70px;color:#62718a;font-size:.9rem}
110
+ .source-list{display:grid;gap:10px}
111
+ .source{background:white;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
112
+ .stamp{
113
+ display:inline-block;background:#eaf8ff;color:#176b82;border:1px solid #c7e8f2;padding:5px 9px;border-radius:999px;font-size:.75rem;font-weight:900
114
+ }
115
+ .keyline{height:1px;background:linear-gradient(90deg,transparent,#d6dfec,transparent);margin:15px 0}
116
+ @media print{
117
+ .toc{display:none}.hero{padding-top:20px}section{break-inside:avoid;padding:28px 0}
118
+ body{background:white}.paper,.card,.diagram{box-shadow:none}
119
+ }
120
+ </style>
121
+ </head>
122
+ <body>
123
+
124
+ <header class="hero">
125
+ <div class="container">
126
+ <span class="badge">📘 Team Explainer • Dify-powered product strategy</span>
127
+ <h1>We build the <span>experience.</span><br>Dify runs the engine.</h1>
128
+ <p class="lead">
129
+ This document explains, in simple visual terms, how we can create our own branded no-code AI agent/workflow platform
130
+ while using Dify underneath for workflow execution, agents, RAG, tools, model connections and runtime operations.
131
+ </p>
132
+
133
+ <div class="hero-grid">
134
+ <div class="big-idea">
135
+ <div style="font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;opacity:.75;font-weight:900">The one sentence everyone should remember</div>
136
+ <div style="font-size:clamp(1.5rem,3vw,2.55rem);line-height:1.1;font-weight:900;margin-top:10px">
137
+ We are <strong>not rebuilding Dify.</strong><br>
138
+ We are building <strong>our own product UI</strong> on top of Dify.
139
+ </div>
140
+ <div style="margin-top:18px;color:#dce7ff">
141
+ Think of Dify as the engine, gearbox and electronics inside a car. Our product is the dashboard, controls,
142
+ body design and customer experience.
143
+ </div>
144
+ </div>
145
+
146
+ <div class="paper hero-card">
147
+ <svg viewBox="0 0 620 430" role="img" aria-label="Car analogy diagram">
148
+ <defs>
149
+ <linearGradient id="gCar" x1="0" x2="1">
150
+ <stop offset="0" stop-color="#4f7cff"/><stop offset="1" stop-color="#7c5cff"/>
151
+ </linearGradient>
152
+ </defs>
153
+ <rect x="25" y="35" width="570" height="350" rx="30" fill="#f6f9ff" stroke="#dbe6f7"/>
154
+ <text x="310" y="76" text-anchor="middle" font-size="26" font-weight="900" fill="#1e2e52">🚙 PRODUCT ANALOGY</text>
155
+ <path d="M145 245 L195 170 H425 L485 245 L520 255 Q550 260 550 295 V320 H85 V288 Q85 260 115 255 Z" fill="url(#gCar)"/>
156
+ <circle cx="170" cy="320" r="43" fill="#17213b"/><circle cx="170" cy="320" r="19" fill="#dce5f5"/>
157
+ <circle cx="455" cy="320" r="43" fill="#17213b"/><circle cx="455" cy="320" r="19" fill="#dce5f5"/>
158
+ <rect x="210" y="190" width="190" height="65" rx="12" fill="#17213b"/>
159
+ <text x="305" y="218" text-anchor="middle" font-size="18" font-weight="900" fill="#fff">OUR UI</text>
160
+ <text x="305" y="240" text-anchor="middle" font-size="13" fill="#cfe0ff">what the customer sees</text>
161
+ <rect x="260" y="270" width="100" height="42" rx="10" fill="#ffd166"/>
162
+ <text x="310" y="296" text-anchor="middle" font-size="16" font-weight="900" fill="#493800">DIFY</text>
163
+ <path d="M310 255 V270" stroke="#fff" stroke-width="4"/>
164
+ <text x="310" y="370" text-anchor="middle" font-size="14" fill="#5d6b82">Same engine. Our own vehicle.</text>
165
+ </svg>
166
+ </div>
167
+ </div>
168
+ <div class="note" style="margin-top:22px">
169
+ <strong>Important:</strong> Similar functionality is fine as a product goal, but we should not make a pixel-for-pixel or interaction-for-interaction clone of Dify’s frontend.
170
+ The current Dify license specifically protects its frontend branding and notes that the product’s interactive design is protected by an appearance patent.
171
+ </div>
172
+ </div>
173
+ </header>
174
+
175
+ <nav class="toc">
176
+ <div class="container toc-inner">
177
+ <a href="#idea">1. The Idea</a>
178
+ <a href="#layers">2. What We Build</a>
179
+ <a href="#journey">3. What Happens on Click</a>
180
+ <a href="#api">4. API Adapter</a>
181
+ <a href="#deployment">5. Customer Deployment</a>
182
+ <a href="#opensource">6. Existing Open Source</a>
183
+ <a href="#license">7. Guardrails</a>
184
+ <a href="#roadmap">8. Roadmap</a>
185
+ <a href="#mvp">9. MVP</a>
186
+ </div>
187
+ </nav>
188
+
189
+ <main>
190
+
191
+ <section id="idea">
192
+ <div class="container">
193
+ <div class="kicker">Chapter 1</div>
194
+ <h2>The idea in plain English</h2>
195
+ <p class="section-intro">
196
+ A customer should feel like they are using <strong>our AI automation platform</strong>. They create agents, drag workflow nodes,
197
+ connect company systems, add knowledge and run automations. Underneath, Dify does the heavy execution work.
198
+ </p>
199
+
200
+ <div class="diagram">
201
+ <svg viewBox="0 0 1100 450">
202
+ <defs>
203
+ <marker id="arr1" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
204
+ <path d="M0,0 L0,6 L9,3 z" fill="#52698f"/>
205
+ </marker>
206
+ </defs>
207
+ <rect x="30" y="32" width="1040" height="380" rx="28" fill="#f8fbff" stroke="#dce7f6"/>
208
+ <text x="550" y="73" text-anchor="middle" font-size="24" font-weight="900" fill="#17213b">THE PRODUCT STACK</text>
209
+
210
+ <rect x="70" y="120" width="245" height="220" rx="22" fill="#eef3ff" stroke="#afc4ff" stroke-width="2"/>
211
+ <text x="192" y="158" text-anchor="middle" font-size="22" font-weight="900" fill="#315bd8">OUR PRODUCT</text>
212
+ <text x="192" y="190" text-anchor="middle" font-size="15" fill="#465c7f">Dashboard</text>
213
+ <text x="192" y="218" text-anchor="middle" font-size="15" fill="#465c7f">Visual Builder</text>
214
+ <text x="192" y="246" text-anchor="middle" font-size="15" fill="#465c7f">Agent Setup</text>
215
+ <text x="192" y="274" text-anchor="middle" font-size="15" fill="#465c7f">Knowledge UI</text>
216
+ <text x="192" y="302" text-anchor="middle" font-size="15" fill="#465c7f">Connections + Logs</text>
217
+
218
+ <rect x="425" y="120" width="250" height="220" rx="22" fill="#f4efff" stroke="#c8b6ff" stroke-width="2"/>
219
+ <text x="550" y="158" text-anchor="middle" font-size="22" font-weight="900" fill="#6845d6">DIFY ENGINE</text>
220
+ <text x="550" y="190" text-anchor="middle" font-size="15" fill="#5b4c76">Workflow runtime</text>
221
+ <text x="550" y="218" text-anchor="middle" font-size="15" fill="#5b4c76">Agent execution</text>
222
+ <text x="550" y="246" text-anchor="middle" font-size="15" fill="#5b4c76">RAG / datasets</text>
223
+ <text x="550" y="274" text-anchor="middle" font-size="15" fill="#5b4c76">Tools / plugins</text>
224
+ <text x="550" y="302" text-anchor="middle" font-size="15" fill="#5b4c76">Runs / tracing</text>
225
+
226
+ <rect x="785" y="120" width="245" height="220" rx="22" fill="#ecfbf4" stroke="#a8e4c7" stroke-width="2"/>
227
+ <text x="907" y="158" text-anchor="middle" font-size="22" font-weight="900" fill="#16845a">OUTSIDE WORLD</text>
228
+ <text x="907" y="190" text-anchor="middle" font-size="15" fill="#426b5a">OpenAI / Claude</text>
229
+ <text x="907" y="218" text-anchor="middle" font-size="15" fill="#426b5a">Gemini / private LLM</text>
230
+ <text x="907" y="246" text-anchor="middle" font-size="15" fill="#426b5a">CRM / ERP</text>
231
+ <text x="907" y="274" text-anchor="middle" font-size="15" fill="#426b5a">Email / SharePoint</text>
232
+ <text x="907" y="302" text-anchor="middle" font-size="15" fill="#426b5a">Databases / APIs</text>
233
+
234
+ <line x1="315" y1="230" x2="420" y2="230" stroke="#52698f" stroke-width="4" marker-end="url(#arr1)"/>
235
+ <line x1="675" y1="230" x2="780" y2="230" stroke="#52698f" stroke-width="4" marker-end="url(#arr1)"/>
236
+ <text x="367" y="210" text-anchor="middle" font-size="13" font-weight="800" fill="#52698f">OUR ADAPTER</text>
237
+ <text x="727" y="210" text-anchor="middle" font-size="13" font-weight="800" fill="#52698f">CONNECTORS</text>
238
+ </svg>
239
+ </div>
240
+
241
+ <div class="grid3" style="margin-top:18px">
242
+ <div class="card good"><div class="icon">🎨</div><h3>We own the experience</h3><p>Branding, page structure, workflow editor, settings, templates, onboarding and permissions are ours.</p></div>
243
+ <div class="card good"><div class="icon">⚙️</div><h3>Dify owns the heavy runtime</h3><p>Instead of writing an agent/workflow execution engine from scratch, we delegate execution to Dify.</p></div>
244
+ <div class="card good"><div class="icon">🔌</div><h3>Systems stay pluggable</h3><p>LLMs, company APIs, MCP servers, tools and knowledge sources sit behind the runtime.</p></div>
245
+ </div>
246
+ </div>
247
+ </section>
248
+
249
+ <section id="layers">
250
+ <div class="container">
251
+ <div class="kicker">Chapter 2</div>
252
+ <h2>What exactly are we building?</h2>
253
+ <p class="section-intro">The simplest way to divide the work is: <strong>customer-facing product layer</strong> vs <strong>execution layer</strong>.</p>
254
+
255
+ <div class="grid2">
256
+ <div class="card good">
257
+ <div class="icon">👩‍🎨</div>
258
+ <h3>WE BUILD THIS</h3>
259
+ <ul class="checklist">
260
+ <li>Our login, branding and navigation</li>
261
+ <li>Agent creation screens</li>
262
+ <li>Visual drag-and-drop workflow editor</li>
263
+ <li>Knowledge-base management screens</li>
264
+ <li>Connections / credentials UI</li>
265
+ <li>Templates and starter workflows</li>
266
+ <li>Human-friendly run history and error screens</li>
267
+ <li>Role/permission rules appropriate for our customers</li>
268
+ <li>Deployment/updater tooling for each customer</li>
269
+ </ul>
270
+ </div>
271
+
272
+ <div class="card warn">
273
+ <div class="icon">🧠</div>
274
+ <h3>DIFY ALREADY DOES THIS</h3>
275
+ <ul class="checklist">
276
+ <li>Execute workflow graphs</li>
277
+ <li>Run LLM and agent nodes</li>
278
+ <li>Manage model-provider connections</li>
279
+ <li>Run RAG / knowledge retrieval</li>
280
+ <li>Execute tools and plugins</li>
281
+ <li>Handle node variables and outputs</li>
282
+ <li>Track workflow runs and traces</li>
283
+ <li>Publish and execute applications</li>
284
+ <li>Maintain internal workflow definitions</li>
285
+ </ul>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="callout green">
290
+ <strong>Why this matters:</strong> a normal “build our own agent platform” project can turn into years of engine work.
291
+ With this architecture, our main engineering challenge becomes a much more manageable product problem:
292
+ <strong>build a clean frontend + stable adapter to Dify.</strong>
293
+ </div>
294
+
295
+ <div class="diagram">
296
+ <svg viewBox="0 0 1100 510">
297
+ <defs><marker id="arr2" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"><path d="M0 0 L0 6 L9 3z" fill="#65799d"/></marker></defs>
298
+ <text x="550" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">WHAT THE CUSTOMER SEES VS WHAT THEY NEVER NEED TO SEE</text>
299
+
300
+ <rect x="40" y="75" width="1020" height="150" rx="25" fill="#edf4ff" stroke="#b9ccff"/>
301
+ <text x="70" y="110" font-size="17" font-weight="900" fill="#315bd8">VISIBLE: OUR PRODUCT</text>
302
+ <g font-size="14" font-weight="800" fill="#354968">
303
+ <rect x="75" y="135" width="150" height="55" rx="13" fill="#fff" stroke="#cddafa"/><text x="150" y="168" text-anchor="middle">Dashboard</text>
304
+ <rect x="245" y="135" width="160" height="55" rx="13" fill="#fff" stroke="#cddafa"/><text x="325" y="168" text-anchor="middle">Agent Builder</text>
305
+ <rect x="425" y="135" width="170" height="55" rx="13" fill="#fff" stroke="#cddafa"/><text x="510" y="168" text-anchor="middle">Workflow Canvas</text>
306
+ <rect x="615" y="135" width="170" height="55" rx="13" fill="#fff" stroke="#cddafa"/><text x="700" y="168" text-anchor="middle">Knowledge</text>
307
+ <rect x="805" y="135" width="180" height="55" rx="13" fill="#fff" stroke="#cddafa"/><text x="895" y="168" text-anchor="middle">Connections / Logs</text>
308
+ </g>
309
+
310
+ <line x1="550" y1="225" x2="550" y2="275" stroke="#65799d" stroke-width="4" marker-end="url(#arr2)"/>
311
+ <rect x="420" y="255" width="260" height="50" rx="14" fill="#17213b"/>
312
+ <text x="550" y="286" text-anchor="middle" font-size="16" font-weight="900" fill="#fff">OUR DIFY ADAPTER API</text>
313
+
314
+ <line x1="550" y1="305" x2="550" y2="350" stroke="#65799d" stroke-width="4" marker-end="url(#arr2)"/>
315
+
316
+ <rect x="40" y="345" width="1020" height="130" rx="25" fill="#f5efff" stroke="#ccbaff"/>
317
+ <text x="70" y="380" font-size="17" font-weight="900" fill="#6845d6">HIDDEN: DIFY RUNTIME</text>
318
+ <g font-size="14" font-weight="800" fill="#4a3d64">
319
+ <rect x="85" y="398" width="160" height="48" rx="12" fill="#fff"/><text x="165" y="428" text-anchor="middle">Workflow Engine</text>
320
+ <rect x="270" y="398" width="150" height="48" rx="12" fill="#fff"/><text x="345" y="428" text-anchor="middle">Agent Runtime</text>
321
+ <rect x="445" y="398" width="130" height="48" rx="12" fill="#fff"/><text x="510" y="428" text-anchor="middle">RAG</text>
322
+ <rect x="600" y="398" width="150" height="48" rx="12" fill="#fff"/><text x="675" y="428" text-anchor="middle">Tools / Plugins</text>
323
+ <rect x="775" y="398" width="180" height="48" rx="12" fill="#fff"/><text x="865" y="428" text-anchor="middle">Runs / Versions</text>
324
+ </g>
325
+ </svg>
326
+ </div>
327
+ </div>
328
+ </section>
329
+
330
+ <section id="journey">
331
+ <div class="container">
332
+ <div class="kicker">Chapter 3</div>
333
+ <h2>What happens when a user drags a node?</h2>
334
+ <p class="section-intro">This is the most important engineering flow for the team to understand.</p>
335
+
336
+ <div class="diagram">
337
+ <svg viewBox="0 0 1160 520">
338
+ <defs><marker id="arr3" markerWidth="11" markerHeight="11" refX="9" refY="3.5" orient="auto"><path d="M0 0 L0 7 L10 3.5z" fill="#5c6f91"/></marker></defs>
339
+ <text x="580" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">EXAMPLE: USER CREATES “EMAIL → AI → APPROVAL → SEND”</text>
340
+
341
+ <g font-size="14" font-weight="900" text-anchor="middle">
342
+ <rect x="42" y="90" width="185" height="80" rx="18" fill="#eaf2ff" stroke="#a9c0ff" stroke-width="2"/>
343
+ <text x="134" y="122" fill="#315bd8">1. USER ACTION</text><text x="134" y="146" fill="#4d6389" font-weight="700">drops AI node</text>
344
+
345
+ <rect x="285" y="90" width="190" height="80" rx="18" fill="#edf9ff" stroke="#a4dfec" stroke-width="2"/>
346
+ <text x="380" y="122" fill="#1685a0">2. OUR CANVAS</text><text x="380" y="146" fill="#4d6389" font-weight="700">updates local graph</text>
347
+
348
+ <rect x="535" y="90" width="190" height="80" rx="18" fill="#f4efff" stroke="#c5b3ff" stroke-width="2"/>
349
+ <text x="630" y="122" fill="#6845d6">3. ADAPTER</text><text x="630" y="146" fill="#5b4d79" font-weight="700">translates graph</text>
350
+
351
+ <rect x="785" y="90" width="155" height="80" rx="18" fill="#fff5e8" stroke="#ffd19a" stroke-width="2"/>
352
+ <text x="862" y="122" fill="#b56c12">4. DIFY</text><text x="862" y="146" fill="#7a654a" font-weight="700">stores draft</text>
353
+
354
+ <rect x="995" y="90" width="125" height="80" rx="18" fill="#edfbf4" stroke="#a8e4c7" stroke-width="2"/>
355
+ <text x="1057" y="122" fill="#16845a">5. RUN</text><text x="1057" y="146" fill="#4a6e5e" font-weight="700">executes</text>
356
+ </g>
357
+
358
+ <g stroke="#5c6f91" stroke-width="4" marker-end="url(#arr3)">
359
+ <line x1="227" y1="130" x2="280" y2="130"/><line x1="475" y1="130" x2="530" y2="130"/>
360
+ <line x1="725" y1="130" x2="780" y2="130"/><line x1="940" y1="130" x2="990" y2="130"/>
361
+ </g>
362
+
363
+ <rect x="90" y="230" width="980" height="220" rx="24" fill="#fff" stroke="#dbe4f0"/>
364
+ <text x="580" y="270" text-anchor="middle" font-size="18" font-weight="900" fill="#233557">THE ACTUAL WORKFLOW THE USER SEES</text>
365
+
366
+ <g text-anchor="middle" font-size="14" font-weight="900">
367
+ <rect x="145" y="325" width="150" height="65" rx="17" fill="#eaf2ff" stroke="#9fbaff" stroke-width="2"/><text x="220" y="353" fill="#315bd8">📧 EMAIL</text><text x="220" y="375" fill="#586b8a" font-weight="700">trigger</text>
368
+ <rect x="365" y="325" width="150" height="65" rx="17" fill="#f2edff" stroke="#baa7ff" stroke-width="2"/><text x="440" y="353" fill="#6845d6">🤖 AI AGENT</text><text x="440" y="375" fill="#685b80" font-weight="700">understand + draft</text>
369
+ <rect x="585" y="325" width="150" height="65" rx="17" fill="#fff5e5" stroke="#ffd092" stroke-width="2"/><text x="660" y="353" fill="#b56c12">👤 APPROVAL</text><text x="660" y="375" fill="#806547" font-weight="700">human check</text>
370
+ <rect x="805" y="325" width="150" height="65" rx="17" fill="#eaf9f1" stroke="#9fdfc1" stroke-width="2"/><text x="880" y="353" fill="#16845a">✉️ SEND</text><text x="880" y="375" fill="#567262" font-weight="700">final action</text>
371
+ </g>
372
+ <g stroke="#5c6f91" stroke-width="4" marker-end="url(#arr3)">
373
+ <line x1="295" y1="357" x2="360" y2="357"/><line x1="515" y1="357" x2="580" y2="357"/><line x1="735" y1="357" x2="800" y2="357"/>
374
+ </g>
375
+ </svg>
376
+ </div>
377
+
378
+ <div class="grid4" style="margin-top:18px">
379
+ <div class="card"><span class="pill">Frontend</span><h3 style="margin-top:8px">Canvas state</h3><p>Our UI stores nodes, positions, connections and friendly labels.</p></div>
380
+ <div class="card"><span class="pill">Backend</span><h3 style="margin-top:8px">Translate</h3><p>Our adapter converts our friendly graph schema into Dify’s workflow graph schema.</p></div>
381
+ <div class="card"><span class="pill">Dify</span><h3 style="margin-top:8px">Save + validate</h3><p>Dify receives the workflow draft, validates it and prepares it for execution.</p></div>
382
+ <div class="card"><span class="pill">Runtime</span><h3 style="margin-top:8px">Execute</h3><p>Dify invokes models, RAG, tools and APIs, then returns results and traces.</p></div>
383
+ </div>
384
+ </div>
385
+ </section>
386
+
387
+ <section id="api">
388
+ <div class="container">
389
+ <div class="kicker">Chapter 4</div>
390
+ <h2>The adapter is our safety wall</h2>
391
+ <p class="section-intro">
392
+ Dify’s normal public Service API is designed mainly for <em>running</em> apps. To reproduce Studio-like management functionality,
393
+ we need capabilities similar to the internal Console API used by Dify’s own frontend. We should hide that behind one adapter owned by us.
394
+ </p>
395
+
396
+ <div class="diagram">
397
+ <svg viewBox="0 0 1100 500">
398
+ <defs><marker id="arr4" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"><path d="M0 0 L0 6 L9 3z" fill="#576b90"/></marker></defs>
399
+ <rect x="65" y="60" width="220" height="340" rx="22" fill="#eef4ff" stroke="#afc4ff"/>
400
+ <text x="175" y="98" text-anchor="middle" font-size="20" font-weight="900" fill="#315bd8">OUR FRONTEND</text>
401
+ <text x="175" y="145" text-anchor="middle" font-size="14" fill="#4d6388">Create app</text>
402
+ <text x="175" y="177" text-anchor="middle" font-size="14" fill="#4d6388">Edit graph</text>
403
+ <text x="175" y="209" text-anchor="middle" font-size="14" fill="#4d6388">Knowledge</text>
404
+ <text x="175" y="241" text-anchor="middle" font-size="14" fill="#4d6388">Models</text>
405
+ <text x="175" y="273" text-anchor="middle" font-size="14" fill="#4d6388">Plugins</text>
406
+ <text x="175" y="305" text-anchor="middle" font-size="14" fill="#4d6388">Versions</text>
407
+ <text x="175" y="337" text-anchor="middle" font-size="14" fill="#4d6388">Runs</text>
408
+
409
+ <rect x="405" y="100" width="290" height="260" rx="24" fill="#17213b"/>
410
+ <text x="550" y="143" text-anchor="middle" font-size="22" font-weight="900" fill="#fff">OUR DIFY ADAPTER</text>
411
+ <text x="550" y="187" text-anchor="middle" font-size="14" fill="#cbd8f1">Stable API for our frontend</text>
412
+ <text x="550" y="220" text-anchor="middle" font-size="14" fill="#cbd8f1">Authentication + session handling</text>
413
+ <text x="550" y="253" text-anchor="middle" font-size="14" fill="#cbd8f1">Our schema ↔ Dify schema</text>
414
+ <text x="550" y="286" text-anchor="middle" font-size="14" fill="#cbd8f1">Version compatibility layer</text>
415
+ <text x="550" y="319" text-anchor="middle" font-size="14" fill="#ffd166" font-weight="900">ONLY THIS LAYER KNOWS DIFY DETAILS</text>
416
+
417
+ <rect x="815" y="60" width="220" height="340" rx="22" fill="#f4efff" stroke="#c5b3ff"/>
418
+ <text x="925" y="98" text-anchor="middle" font-size="20" font-weight="900" fill="#6845d6">DIFY</text>
419
+ <text x="925" y="145" text-anchor="middle" font-size="14" fill="#625376">Console endpoints</text>
420
+ <text x="925" y="177" text-anchor="middle" font-size="14" fill="#625376">Workflow drafts</text>
421
+ <text x="925" y="209" text-anchor="middle" font-size="14" fill="#625376">Datasets / RAG</text>
422
+ <text x="925" y="241" text-anchor="middle" font-size="14" fill="#625376">Providers</text>
423
+ <text x="925" y="273" text-anchor="middle" font-size="14" fill="#625376">Plugins</text>
424
+ <text x="925" y="305" text-anchor="middle" font-size="14" fill="#625376">Publishing</text>
425
+ <text x="925" y="337" text-anchor="middle" font-size="14" fill="#625376">Execution</text>
426
+
427
+ <line x1="285" y1="230" x2="400" y2="230" stroke="#576b90" stroke-width="4" marker-end="url(#arr4)"/>
428
+ <line x1="695" y1="230" x2="810" y2="230" stroke="#576b90" stroke-width="4" marker-end="url(#arr4)"/>
429
+ </svg>
430
+ </div>
431
+
432
+ <div class="callout orange">
433
+ <strong>Why the adapter matters:</strong> internal Dify endpoints may change between releases.
434
+ If our UI calls Dify directly everywhere, every Dify upgrade can break dozens of screens.
435
+ If everything goes through one adapter, we update one compatibility layer.
436
+ </div>
437
+
438
+ <div class="grid2">
439
+ <div class="card good">
440
+ <div class="icon">🛡️</div><h3>Good architecture</h3>
441
+ <div class="code">Our UI
442
+ ↓
443
+ /api/workflows
444
+ ↓
445
+ DifyAdapter
446
+ ↓
447
+ Dify console/runtime endpoints</div>
448
+ </div>
449
+ <div class="card bad">
450
+ <div class="icon">💥</div><h3>Fragile architecture</h3>
451
+ <div class="code">Page A → Dify endpoint X
452
+ Page B → Dify endpoint Y
453
+ Page C → Dify endpoint Z
454
+ Page D → direct DB write
455
+ ...</div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </section>
460
+
461
+ <section id="deployment">
462
+ <div class="container">
463
+ <div class="kicker">Chapter 5</div>
464
+ <h2>One dedicated environment per customer</h2>
465
+ <p class="section-intro">
466
+ Our intended commercial model is not “one Dify with many customer workspaces.” Instead, each company gets its own isolated deployment.
467
+ </p>
468
+
469
+ <div class="diagram">
470
+ <svg viewBox="0 0 1160 560">
471
+ <defs><marker id="arr5" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"><path d="M0 0 L0 6 L9 3z" fill="#617495"/></marker></defs>
472
+ <text x="580" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">DEDICATED CUSTOMER DEPLOYMENT MODEL</text>
473
+
474
+ <g>
475
+ <rect x="55" y="85" width="310" height="400" rx="24" fill="#eef4ff" stroke="#afc4ff" stroke-width="2"/>
476
+ <text x="210" y="122" text-anchor="middle" font-size="20" font-weight="900" fill="#315bd8">CUSTOMER A</text>
477
+ <rect x="100" y="150" width="220" height="55" rx="12" fill="#fff"/><text x="210" y="184" text-anchor="middle" font-size="15" font-weight="900" fill="#263a61">Our UI</text>
478
+ <line x1="210" y1="205" x2="210" y2="235" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
479
+ <rect x="100" y="240" width="220" height="55" rx="12" fill="#17213b"/><text x="210" y="274" text-anchor="middle" font-size="15" font-weight="900" fill="#fff">Our Adapter</text>
480
+ <line x1="210" y1="295" x2="210" y2="325" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
481
+ <rect x="100" y="330" width="220" height="55" rx="12" fill="#f0eaff"/><text x="210" y="364" text-anchor="middle" font-size="15" font-weight="900" fill="#6845d6">Dedicated Dify A</text>
482
+ <text x="210" y="423" text-anchor="middle" font-size="13" fill="#506486">Own DB • Redis • files</text>
483
+ <text x="210" y="447" text-anchor="middle" font-size="13" fill="#506486">Own credentials • LLMs</text>
484
+ </g>
485
+
486
+ <g>
487
+ <rect x="425" y="85" width="310" height="400" rx="24" fill="#effbf5" stroke="#abe1c7" stroke-width="2"/>
488
+ <text x="580" y="122" text-anchor="middle" font-size="20" font-weight="900" fill="#16845a">CUSTOMER B</text>
489
+ <rect x="470" y="150" width="220" height="55" rx="12" fill="#fff"/><text x="580" y="184" text-anchor="middle" font-size="15" font-weight="900" fill="#263a61">Our UI</text>
490
+ <line x1="580" y1="205" x2="580" y2="235" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
491
+ <rect x="470" y="240" width="220" height="55" rx="12" fill="#17213b"/><text x="580" y="274" text-anchor="middle" font-size="15" font-weight="900" fill="#fff">Our Adapter</text>
492
+ <line x1="580" y1="295" x2="580" y2="325" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
493
+ <rect x="470" y="330" width="220" height="55" rx="12" fill="#eaf7f0"/><text x="580" y="364" text-anchor="middle" font-size="15" font-weight="900" fill="#16845a">Dedicated Dify B</text>
494
+ <text x="580" y="423" text-anchor="middle" font-size="13" fill="#506486">Own DB • Redis • files</text>
495
+ <text x="580" y="447" text-anchor="middle" font-size="13" fill="#506486">Own credentials • LLMs</text>
496
+ </g>
497
+
498
+ <g>
499
+ <rect x="795" y="85" width="310" height="400" rx="24" fill="#fff6e9" stroke="#ffd49f" stroke-width="2"/>
500
+ <text x="950" y="122" text-anchor="middle" font-size="20" font-weight="900" fill="#b56c12">CUSTOMER C</text>
501
+ <rect x="840" y="150" width="220" height="55" rx="12" fill="#fff"/><text x="950" y="184" text-anchor="middle" font-size="15" font-weight="900" fill="#263a61">Our UI</text>
502
+ <line x1="950" y1="205" x2="950" y2="235" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
503
+ <rect x="840" y="240" width="220" height="55" rx="12" fill="#17213b"/><text x="950" y="274" text-anchor="middle" font-size="15" font-weight="900" fill="#fff">Our Adapter</text>
504
+ <line x1="950" y1="295" x2="950" y2="325" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
505
+ <rect x="840" y="330" width="220" height="55" rx="12" fill="#fff0db"/><text x="950" y="364" text-anchor="middle" font-size="15" font-weight="900" fill="#b56c12">Dedicated Dify C</text>
506
+ <text x="950" y="423" text-anchor="middle" font-size="13" fill="#506486">Own DB • Redis • files</text>
507
+ <text x="950" y="447" text-anchor="middle" font-size="13" fill="#506486">Own credentials • LLMs</text>
508
+ </g>
509
+ </svg>
510
+ </div>
511
+
512
+ <div class="grid2" style="margin-top:18px">
513
+ <div class="card good">
514
+ <div class="icon">✅</div><h3>Our intended pattern</h3>
515
+ <p><strong>One customer = one isolated deployment.</strong> Their workflows, credentials, knowledge and runtime are separated at the infrastructure level.</p>
516
+ </div>
517
+ <div class="card bad">
518
+ <div class="icon">🚫</div><h3>Pattern to avoid without commercial authorization</h3>
519
+ <p><strong>One shared Dify = many customer workspaces.</strong> The current license defines a tenant as a workspace and restricts using the source to operate a multi-tenant environment unless authorized in writing.</p>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </section>
524
+
525
+ <section id="opensource">
526
+ <div class="container">
527
+ <div class="kicker">Chapter 6</div>
528
+ <h2>What has already been built by the open-source community?</h2>
529
+ <p class="section-intro">
530
+ We did not find a polished, complete “replacement Dify Studio” that we can simply clone and ship.
531
+ But we found projects that solve important pieces of the puzzle—especially programmatic control of Dify.
532
+ </p>
533
+
534
+ <div class="grid3">
535
+ <div class="card">
536
+ <div class="icon">🧰</div>
537
+ <h3>dify-mcp</h3>
538
+ <span class="pill">Most important reference</span>
539
+ <p>Exposes the Dify console surface programmatically through a large MCP/CLI tool registry. Its README currently documents <strong>174 tools across 19 namespaces</strong>.</p>
540
+ <p><strong>Why we care:</strong> it is a map of how to programmatically create apps, manipulate workflows, manage RAG, providers, plugins, runs, versions and more.</p>
541
+ </div>
542
+
543
+ <div class="card">
544
+ <div class="icon">🛠️</div>
545
+ <h3>PSDify</h3>
546
+ <span class="pill">Management automation</span>
547
+ <p>A community project for programmatically managing Dify resources. Useful as another reference for automation around apps, knowledge and related workspace operations.</p>
548
+ <p><strong>Why we care:</strong> it reinforces that Dify can be controlled beyond the public run API—but compatibility must be managed carefully.</p>
549
+ </div>
550
+
551
+ <div class="card">
552
+ <div class="icon">🔄</div>
553
+ <h3>coze2dify</h3>
554
+ <span class="pill">Graph translation example</span>
555
+ <p>Converts Coze workflows into Dify DSL/graphs. It has a frontend, backend, graph components and a conversion layer.</p>
556
+ <p><strong>Why we care:</strong> it demonstrates the exact idea of translating a foreign workflow representation into a Dify-compatible graph.</p>
557
+ </div>
558
+ </div>
559
+
560
+ <div class="callout">
561
+ <strong>Important distinction:</strong> these are not “our finished frontend.” They are <strong>reference implementations and building blocks</strong>.
562
+ We can learn from their API handling, graph translation, schema mapping and test strategies instead of reverse-engineering every Dify capability ourselves.
563
+ </div>
564
+
565
+ <div class="diagram">
566
+ <svg viewBox="0 0 1100 520">
567
+ <defs><marker id="arr6" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"><path d="M0 0 L0 6 L9 3z" fill="#617495"/></marker></defs>
568
+ <text x="550" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">HOW WE USE OPEN-SOURCE REFERENCES</text>
569
+
570
+ <rect x="60" y="100" width="230" height="90" rx="18" fill="#eef4ff" stroke="#b2c6ff"/>
571
+ <text x="175" y="135" text-anchor="middle" font-size="17" font-weight="900" fill="#315bd8">dify-mcp</text>
572
+ <text x="175" y="160" text-anchor="middle" font-size="13" fill="#526789">Console API knowledge</text>
573
+
574
+ <rect x="60" y="220" width="230" height="90" rx="18" fill="#eefbf5" stroke="#abe1c7"/>
575
+ <text x="175" y="255" text-anchor="middle" font-size="17" font-weight="900" fill="#16845a">PSDify</text>
576
+ <text x="175" y="280" text-anchor="middle" font-size="13" fill="#526789">Management patterns</text>
577
+
578
+ <rect x="60" y="340" width="230" height="90" rx="18" fill="#fff5e8" stroke="#ffd09b"/>
579
+ <text x="175" y="375" text-anchor="middle" font-size="17" font-weight="900" fill="#b56c12">coze2dify</text>
580
+ <text x="175" y="400" text-anchor="middle" font-size="13" fill="#526789">Graph conversion ideas</text>
581
+
582
+ <rect x="430" y="165" width="260" height="200" rx="24" fill="#17213b"/>
583
+ <text x="560" y="213" text-anchor="middle" font-size="21" font-weight="900" fill="#fff">OUR ADAPTER</text>
584
+ <text x="560" y="250" text-anchor="middle" font-size="13" fill="#d3dff5">Our schemas</text>
585
+ <text x="560" y="278" text-anchor="middle" font-size="13" fill="#d3dff5">Auth / sessions</text>
586
+ <text x="560" y="306" text-anchor="middle" font-size="13" fill="#d3dff5">Compatibility</text>
587
+ <text x="560" y="334" text-anchor="middle" font-size="13" fill="#ffd166">Tests + version gates</text>
588
+
589
+ <rect x="830" y="185" width="210" height="160" rx="24" fill="#f3edff" stroke="#c5b2ff"/>
590
+ <text x="935" y="230" text-anchor="middle" font-size="22" font-weight="900" fill="#6845d6">DIFY</text>
591
+ <text x="935" y="263" text-anchor="middle" font-size="13" fill="#635476">workflow engine</text>
592
+ <text x="935" y="289" text-anchor="middle" font-size="13" fill="#635476">agents • RAG • tools</text>
593
+ <text x="935" y="315" text-anchor="middle" font-size="13" fill="#635476">runtime + persistence</text>
594
+
595
+ <g stroke="#617495" stroke-width="4" marker-end="url(#arr6)">
596
+ <line x1="290" y1="145" x2="425" y2="215"/>
597
+ <line x1="290" y1="265" x2="425" y2="265"/>
598
+ <line x1="290" y1="385" x2="425" y2="315"/>
599
+ <line x1="690" y1="265" x2="825" y2="265"/>
600
+ </g>
601
+ </svg>
602
+ </div>
603
+ </div>
604
+ </section>
605
+
606
+ <section id="license">
607
+ <div class="container">
608
+ <div class="kicker">Chapter 7</div>
609
+ <h2>Licensing and design guardrails</h2>
610
+ <p class="section-intro">
611
+ These are product-engineering guardrails, not legal advice. Before commercial launch, we should obtain written confirmation from Dify for our exact deployment model.
612
+ </p>
613
+
614
+ <div class="grid3">
615
+ <div class="card good">
616
+ <div class="icon">✅</div><h3>Current license explicitly allows</h3>
617
+ <p>Commercial use including using Dify as a <strong>backend service for other applications</strong> or as an application-development platform.</p>
618
+ </div>
619
+ <div class="card warn">
620
+ <div class="icon">⚠️</div><h3>Multi-tenant restriction</h3>
621
+ <p>The current license says operating a multi-tenant environment using Dify source requires written authorization; a tenant is defined as a workspace.</p>
622
+ </div>
623
+ <div class="card warn">
624
+ <div class="icon">🎨</div><h3>Frontend / appearance</h3>
625
+ <p>Dify’s frontend logo/copyright rules apply when using its frontend. The license also says the product’s interactive design is protected by an appearance patent.</p>
626
+ </div>
627
+ </div>
628
+
629
+ <div class="grid2" style="margin-top:18px">
630
+ <div class="card good">
631
+ <h3>✅ Our design goal</h3>
632
+ <ul class="checklist">
633
+ <li>Same category of capabilities</li>
634
+ <li>Our own navigation and information architecture</li>
635
+ <li>Our own visual node components</li>
636
+ <li>Our own onboarding and terminology</li>
637
+ <li>Our own workflow UX conventions</li>
638
+ <li>Dedicated Dify deployment per customer</li>
639
+ </ul>
640
+ </div>
641
+ <div class="card bad">
642
+ <h3>❌ Do not aim for</h3>
643
+ <ul class="checklist xlist">
644
+ <li>Pixel-for-pixel copy of Dify</li>
645
+ <li>Cloning every interaction exactly</li>
646
+ <li>Taking Dify frontend and simply hiding branding</li>
647
+ <li>One shared Dify with a workspace for every customer without authorization</li>
648
+ <li>UI code tightly coupled to undocumented Dify endpoints everywhere</li>
649
+ </ul>
650
+ </div>
651
+ </div>
652
+ </div>
653
+ </section>
654
+
655
+ <section id="roadmap">
656
+ <div class="container">
657
+ <div class="kicker">Chapter 8</div>
658
+ <h2>Recommended build roadmap</h2>
659
+ <p class="section-intro">Do not rebuild every Dify screen on day one. Prove the adapter and the visual builder first.</p>
660
+
661
+ <div class="timeline">
662
+ <div class="step">
663
+ <div class="num">1</div>
664
+ <div class="card" style="flex:1"><h3>Freeze one Dify version</h3><p>Pick a known Dify version for development. Do not chase every upstream release while the product architecture is still changing.</p></div>
665
+ </div>
666
+ <div class="step">
667
+ <div class="num">2</div>
668
+ <div class="card" style="flex:1"><h3>Build the Dify adapter first</h3><p>Implement app list/create, workflow draft read/write, validate, run and publish. This proves that our frontend can control Dify without depending on its frontend.</p></div>
669
+ </div>
670
+ <div class="step">
671
+ <div class="num">3</div>
672
+ <div class="card" style="flex:1"><h3>Build the simplest visual canvas</h3><p>Start with a tiny node set: Start, LLM/Agent, Knowledge, HTTP Tool, Condition, Human Approval and Output.</p></div>
673
+ </div>
674
+ <div class="step">
675
+ <div class="num">4</div>
676
+ <div class="card" style="flex:1"><h3>Add knowledge + model configuration</h3><p>Create our own screens for datasets, uploaded documents, model providers and credentials.</p></div>
677
+ </div>
678
+ <div class="step">
679
+ <div class="num">5</div>
680
+ <div class="card" style="flex:1"><h3>Add run history and debugging</h3><p>Translate Dify traces into a clean visual execution timeline so business users can understand why a workflow failed.</p></div>
681
+ </div>
682
+ <div class="step">
683
+ <div class="num">6</div>
684
+ <div class="card" style="flex:1"><h3>Build customer deployment automation</h3><p>One command or installer should provision the customer’s frontend, adapter, Dify, database, cache, storage and secrets.</p></div>
685
+ </div>
686
+ </div>
687
+ </div>
688
+ </section>
689
+
690
+ <section id="mvp">
691
+ <div class="container">
692
+ <div class="kicker">Chapter 9</div>
693
+ <h2>What should our first MVP actually contain?</h2>
694
+ <p class="section-intro">The first MVP should prove that a non-technical user can build and run a useful workflow without ever seeing Dify.</p>
695
+
696
+ <div class="grid4">
697
+ <div class="card"><div class="icon">🏠</div><h3>Dashboard</h3><p>Agents, workflows, recent runs, templates.</p></div>
698
+ <div class="card"><div class="icon">🧩</div><h3>Workflow Builder</h3><p>Drag, connect, configure, test and publish.</p></div>
699
+ <div class="card"><div class="icon">🤖</div><h3>Agent Setup</h3><p>Instructions, model, tools, knowledge and variables.</p></div>
700
+ <div class="card"><div class="icon">📚</div><h3>Knowledge</h3><p>Upload documents, see indexing status, test retrieval.</p></div>
701
+ <div class="card"><div class="icon">🔌</div><h3>Connections</h3><p>Model providers, APIs, credentials and MCP/tool endpoints.</p></div>
702
+ <div class="card"><div class="icon">🧪</div><h3>Test Run</h3><p>Run workflow from the builder with sample input.</p></div>
703
+ <div class="card"><div class="icon">🔎</div><h3>Run Inspector</h3><p>See every node, timing, output and error in simple language.</p></div>
704
+ <div class="card"><div class="icon">🚀</div><h3>Publish</h3><p>Activate a workflow/app after validation.</p></div>
705
+ </div>
706
+
707
+ <div class="callout green">
708
+ <strong>MVP success test:</strong> take a teammate who has never used Dify. Ask them to create:
709
+ <em>“When a support request arrives, classify it, search our documents, draft a reply, ask for approval and send it.”</em>
710
+ If they can build and understand it inside our UI, our product concept is working.
711
+ </div>
712
+
713
+ <div class="diagram">
714
+ <svg viewBox="0 0 1130 560">
715
+ <defs><marker id="arr7" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"><path d="M0 0 L0 6 L9 3z" fill="#566b91"/></marker></defs>
716
+ <text x="565" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">MVP WORKFLOW EXPERIENCE</text>
717
+
718
+ <rect x="70" y="80" width="990" height="375" rx="30" fill="#f8fbff" stroke="#dbe5f3"/>
719
+ <rect x="95" y="105" width="180" height="325" rx="20" fill="#17213b"/>
720
+ <text x="185" y="142" text-anchor="middle" font-size="17" font-weight="900" fill="#fff">NODE LIBRARY</text>
721
+ <g fill="#fff" font-size="13" font-weight="800">
722
+ <rect x="117" y="170" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="196" text-anchor="middle">⚡ Trigger</text>
723
+ <rect x="117" y="224" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="250" text-anchor="middle">🤖 AI Agent</text>
724
+ <rect x="117" y="278" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="304" text-anchor="middle">📚 Knowledge</text>
725
+ <rect x="117" y="332" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="358" text-anchor="middle">🔀 Condition</text>
726
+ </g>
727
+
728
+ <rect x="300" y="105" width="735" height="325" rx="20" fill="#fff" stroke="#dce5f0"/>
729
+ <text x="325" y="140" font-size="14" font-weight="900" fill="#50627f">WORKFLOW CANVAS</text>
730
+
731
+ <g font-size="12" text-anchor="middle" font-weight="900">
732
+ <rect x="350" y="200" width="130" height="60" rx="15" fill="#eaf2ff" stroke="#a7bfff"/><text x="415" y="235" fill="#315bd8">SUPPORT EMAIL</text>
733
+ <rect x="535" y="200" width="130" height="60" rx="15" fill="#f1ebff" stroke="#bdaaff"/><text x="600" y="235" fill="#6845d6">AI CLASSIFY</text>
734
+ <rect x="720" y="145" width="140" height="60" rx="15" fill="#eaf9f1" stroke="#a0dfc2"/><text x="790" y="180" fill="#16845a">KNOWLEDGE</text>
735
+ <rect x="720" y="270" width="140" height="60" rx="15" fill="#fff5e5" stroke="#ffd092"/><text x="790" y="305" fill="#b56c12">APPROVAL</text>
736
+ <rect x="910" y="200" width="95" height="60" rx="15" fill="#eaf2ff" stroke="#a7bfff"/><text x="957" y="235" fill="#315bd8">SEND</text>
737
+ </g>
738
+
739
+ <g stroke="#566b91" stroke-width="4" fill="none" marker-end="url(#arr7)">
740
+ <line x1="480" y1="230" x2="530" y2="230"/>
741
+ <path d="M665 230 C690 230 690 175 715 175"/>
742
+ <path d="M665 230 C690 230 690 300 715 300"/>
743
+ <path d="M860 175 C885 175 880 220 905 225"/>
744
+ <path d="M860 300 C890 300 880 245 905 238"/>
745
+ </g>
746
+ <rect x="772" y="470" width="263" height="55" rx="15" fill="#17213b"/>
747
+ <text x="903" y="504" text-anchor="middle" font-size="16" font-weight="900" fill="#fff">▶ TEST WORKFLOW</text>
748
+ </svg>
749
+ </div>
750
+ </div>
751
+ </section>
752
+
753
+ <section>
754
+ <div class="container">
755
+ <div class="kicker">Chapter 10</div>
756
+ <h2>Technical structure we should aim for</h2>
757
+ <p class="section-intro">A simple separation of responsibilities will keep the product maintainable.</p>
758
+
759
+ <table class="compare">
760
+ <thead><tr><th>Layer</th><th>Suggested responsibility</th><th>Possible technology</th></tr></thead>
761
+ <tbody>
762
+ <tr><td><strong>Web UI</strong></td><td>Dashboard, agent builder, workflow canvas, knowledge, settings</td><td>React / Next.js</td></tr>
763
+ <tr><td><strong>Canvas</strong></td><td>Nodes, edges, zoom, selection, graph editing</td><td>React Flow / XYFlow</td></tr>
764
+ <tr><td><strong>Our API</strong></td><td>Auth, validation, stable product endpoints</td><td>FastAPI / Node</td></tr>
765
+ <tr><td><strong>Dify Adapter</strong></td><td>Translate our objects into Dify objects; handle Dify upgrades</td><td>Dedicated service/module</td></tr>
766
+ <tr><td><strong>Dify</strong></td><td>Workflow/agent/RAG/tool execution</td><td>Self-hosted Dify</td></tr>
767
+ <tr><td><strong>Customer data</strong></td><td>Runtime DB, cache, files, vector storage</td><td>Dedicated per deployment</td></tr>
768
+ <tr><td><strong>External systems</strong></td><td>LLMs, APIs, email, CRM, ERP, MCP, databases</td><td>Provider/plugin/tool integrations</td></tr>
769
+ </tbody>
770
+ </table>
771
+ </div>
772
+ </section>
773
+
774
+ <section>
775
+ <div class="container">
776
+ <div class="kicker">Chapter 11</div>
777
+ <h2>Three risks the team must design for</h2>
778
+
779
+ <div class="grid3">
780
+ <div class="card warn">
781
+ <div class="icon">🔁</div>
782
+ <h3>1. Dify API changes</h3>
783
+ <p>Some Studio-management behavior relies on console/internal surfaces, not only the stable public runtime API.</p>
784
+ <p><strong>Mitigation:</strong> adapter layer + pin Dify versions + compatibility tests before upgrades.</p>
785
+ </div>
786
+ <div class="card warn">
787
+ <div class="icon">🧱</div>
788
+ <h3>2. Trying to build too much UI</h3>
789
+ <p>Copying every Dify screen immediately will waste time and make the product complicated.</p>
790
+ <p><strong>Mitigation:</strong> start with the 20% of features that unlock 80% of customer workflows.</p>
791
+ </div>
792
+ <div class="card warn">
793
+ <div class="icon">⚖️</div>
794
+ <h3>3. License / design assumptions</h3>
795
+ <p>Licensing terms and upstream behavior can change.</p>
796
+ <p><strong>Mitigation:</strong> dedicated deployments, original UI, written confirmation from Dify before commercial scale.</p>
797
+ </div>
798
+ </div>
799
+ </div>
800
+ </section>
801
+
802
+ <section>
803
+ <div class="container">
804
+ <div class="kicker">Final page</div>
805
+ <h2>The mental model to leave with</h2>
806
+
807
+ <div class="big-idea">
808
+ <div class="quote" style="color:white;font-size:clamp(1.45rem,3vw,2.4rem)">
809
+ “Our customer should feel like they are using <span style="color:#ffd166">our platform</span>.
810
+ Our engineers should feel like they are using <span style="color:#9be5ff">Dify as an engine</span>.”
811
+ </div>
812
+ </div>
813
+
814
+ <div class="grid3" style="margin-top:20px">
815
+ <div class="card good"><div class="icon">1️⃣</div><h3>Own the UX</h3><p>We differentiate through simplicity, workflow templates, enterprise integrations, deployment and user experience.</p></div>
816
+ <div class="card good"><div class="icon">2️⃣</div><h3>Reuse the engine</h3><p>Dify saves us from rebuilding workflow execution, model orchestration, RAG and tool execution from scratch.</p></div>
817
+ <div class="card good"><div class="icon">3️⃣</div><h3>Protect the boundary</h3><p>A clean adapter between our product and Dify lets us upgrade or even replace the underlying engine later.</p></div>
818
+ </div>
819
+
820
+ <div class="callout green" style="margin-top:24px">
821
+ <strong>The strategic advantage:</strong> if we design the adapter well, our product is not permanently trapped inside Dify.
822
+ Our frontend speaks <em>our own workflow model</em>. Today the adapter compiles it to Dify. In the future, another adapter could target
823
+ LangGraph, Temporal or another runtime without redesigning the customer experience.
824
+ </div>
825
+ </div>
826
+ </section>
827
+
828
+ <section>
829
+ <div class="container">
830
+ <span class="stamp">Sources checked • October 2026</span>
831
+ <h2 style="font-size:2rem;margin-top:12px">Source notes</h2>
832
+ <p class="section-intro">These links are included so engineering and legal can verify the assumptions directly.</p>
833
+ <div class="source-list">
834
+ <div class="source"><strong>Dify license:</strong> <a href="https://github.com/langgenius/dify/blob/main/LICENSE">github.com/langgenius/dify/blob/main/LICENSE</a><br><small>Commercial backend use, multi-tenant restriction, frontend branding condition, appearance-patent notice.</small></div>
835
+ <div class="source"><strong>dify-mcp:</strong> <a href="https://github.com/alexjiaguo/dify-mcp">github.com/alexjiaguo/dify-mcp</a><br><small>Programmatic Dify console control; current README describes 174 tools across 19 namespaces.</small></div>
836
+ <div class="source"><strong>PSDify:</strong> <a href="https://github.com/kurokobo/psdify">github.com/kurokobo/psdify</a><br><small>Community automation/management project around Dify.</small></div>
837
+ <div class="source"><strong>coze2dify:</strong> <a href="https://github.com/biaoma-ty/coze2dify">github.com/biaoma-ty/coze2dify</a><br><small>Coze → Dify graph/DSL conversion project with frontend/backend and graph-mapping examples.</small></div>
838
+ </div>
839
+ <div class="note" style="margin-top:20px">
840
+ <strong>Not legal advice.</strong> Before selling the product, send Dify a short architecture diagram showing
841
+ “our UI → our adapter → one dedicated Dify deployment per customer” and obtain written confirmation that the intended commercial use is acceptable.
842
+ </div>
843
+ </div>
844
+ </section>
845
+
846
+ </main>
847
+
848
+ <footer class="footer">
849
+ <div class="container">
850
+ <div class="keyline"></div>
851
+ <strong>Internal team explainer:</strong> Dify-powered agentic platform architecture.<br>
852
+ Designed to be read like a visual textbook rather than a software specification.
853
+ </div>
854
+ </footer>
855
+
856
+ </body>
857
+ </html>