Hugging Face's logo

Spaces:
bardd
/
platform_explained
Running

App Files Community
platform_explained
File size: 54,508 Bytes
48c0f3a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Our Dify-Powered Agentic Platform — Team Explainer</title>
<style>
:root{
  --ink:#14213d;--muted:#5d6b82;--paper:#fffdf8;--card:#ffffff;
  --blue:#4f7cff;--purple:#7c5cff;--cyan:#18b7d4;--green:#29b473;
  --orange:#ff9f43;--red:#ee5d68;--yellow:#ffd166;--pink:#ef6fb5;
  --line:#dce5f2;--soft:#f3f7fc;--navy:#15203b;
  --shadow:0 12px 30px rgba(26,45,82,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:
  linear-gradient(180deg,#f7fbff 0,#fffdf8 23rem,#fffdf8 100%);
  color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
}
a{color:#315bd8;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1180px;margin:auto;padding:0 22px}
.hero{padding:52px 0 32px;position:relative;overflow:hidden}
.hero:before,.hero:after{content:"";position:absolute;border-radius:999px;filter:blur(0);opacity:.22;z-index:-1}
.hero:before{width:320px;height:320px;background:#6d5cff;right:-80px;top:-90px}
.hero:after{width:240px;height:240px;background:#18b7d4;left:-90px;top:100px}
.badge{
  display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border-radius:999px;
  background:#edf3ff;border:1px solid #cfddff;color:#315bd8;font-weight:800;font-size:.84rem;
}
h1{font-size:clamp(2.25rem,5vw,5rem);line-height:.98;letter-spacing:-.055em;margin:18px 0 20px;max-width:1000px}
h1 span{color:var(--purple)}
.lead{font-size:clamp(1.06rem,1.8vw,1.35rem);max-width:900px;color:var(--muted)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;margin-top:35px}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}}
.paper{
  background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);
}
.hero-card{padding:18px}
.note{
  padding:16px 18px;border-radius:16px;background:#fff8dc;border:1px solid #ffe29a;color:#684e00;
}
.toc{
  position:sticky;top:0;z-index:30;background:rgba(255,253,248,.94);backdrop-filter:blur(12px);
  border-top:1px solid #edf1f7;border-bottom:1px solid #dde4ef;
}
.toc-inner{display:flex;gap:10px;overflow:auto;padding:11px 0;scrollbar-width:none}
.toc a{
  white-space:nowrap;padding:8px 11px;border-radius:10px;color:#40506b;font-weight:800;font-size:.83rem;
  background:#fff;border:1px solid #e0e7f1;
}
section{padding:58px 0}
.kicker{text-transform:uppercase;letter-spacing:.13em;font-weight:900;color:var(--purple);font-size:.77rem}
h2{font-size:clamp(1.8rem,3.4vw,3.15rem);letter-spacing:-.04em;line-height:1.05;margin:8px 0 15px}
h3{font-size:1.27rem;margin:0 0 8px}
.section-intro{color:var(--muted);font-size:1.05rem;max-width:900px;margin-bottom:26px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.grid4,.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
.card{background:white;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 7px 22px rgba(24,46,88,.06)}
.icon{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:#eef3ff;font-size:1.5rem;margin-bottom:12px;border:1px solid #d7e2ff
}
.pill{display:inline-block;padding:4px 9px;border-radius:999px;background:#f0f4fb;color:#51627b;font-size:.77rem;font-weight:900}
.good{background:#ebfbf3;border-color:#c6efd9}
.warn{background:#fff6e8;border-color:#ffddb2}
.bad{background:#fff0f0;border-color:#fac8cc}
.good .icon{background:#dcf8ea}.warn .icon{background:#ffefd4}.bad .icon{background:#ffe2e4}
.big-idea{padding:26px;background:linear-gradient(120deg,#17223e,#283b72);color:white;border-radius:24px;box-shadow:var(--shadow)}
.big-idea strong{color:#ffd166}
.checklist{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.checklist li{display:flex;gap:10px;align-items:flex-start}
.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}
.xlist li:before{content:"×";background:#ffe1e3;color:#b2323c}
.diagram{padding:18px;background:#fbfdff;border:1px solid #dfe8f5;border-radius:22px;overflow:auto}
.diagram svg{display:block;width:100%;height:auto;min-width:680px}
.caption{color:var(--muted);font-size:.88rem;margin-top:9px}
.callout{border-left:5px solid var(--blue);padding:16px 18px;background:#f4f7ff;border-radius:0 14px 14px 0;margin:22px 0}
.callout.orange{border-left-color:var(--orange);background:#fff7ea}
.callout.green{border-left-color:var(--green);background:#effbf5}
.callout.red{border-left-color:var(--red);background:#fff2f3}
.compare{width:100%;border-collapse:separate;border-spacing:0;background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.compare th,.compare td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare th{background:#f3f6fb;color:#31415d;font-size:.84rem;text-transform:uppercase;letter-spacing:.05em}
.compare tr:last-child td{border-bottom:0}
.num{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#263968;color:white;font-weight:900;flex:0 0 38px
}
.step{display:flex;gap:15px;align-items:flex-start}
.step+.step{margin-top:19px}
.timeline{position:relative;padding-left:12px}
.timeline:before{content:"";position:absolute;left:30px;top:24px;bottom:24px;width:3px;background:#dfe7f5}
.timeline .step{position:relative}
.timeline .num{z-index:2}
.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}
.legend{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#52627b;font-weight:800}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#10182b;color:#eaf1ff;border-radius:15px;padding:16px;overflow:auto;font-size:.86rem
}
.quote{font-size:1.25rem;font-weight:900;letter-spacing:-.02em;color:#293a5b}
.footer{padding:36px 0 70px;color:#62718a;font-size:.9rem}
.source-list{display:grid;gap:10px}
.source{background:white;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stamp{
  display:inline-block;background:#eaf8ff;color:#176b82;border:1px solid #c7e8f2;padding:5px 9px;border-radius:999px;font-size:.75rem;font-weight:900
}
.keyline{height:1px;background:linear-gradient(90deg,transparent,#d6dfec,transparent);margin:15px 0}
@media print{
  .toc{display:none}.hero{padding-top:20px}section{break-inside:avoid;padding:28px 0}
  body{background:white}.paper,.card,.diagram{box-shadow:none}
}
</style>
</head>
<body>

<header class="hero">
  <div class="container">
    <span class="badge">📘 Team Explainer • Dify-powered product strategy</span>
    <h1>We build the <span>experience.</span><br>Dify runs the engine.</h1>
    <p class="lead">
      This document explains, in simple visual terms, how we can create our own branded no-code AI agent/workflow platform
      while using Dify underneath for workflow execution, agents, RAG, tools, model connections and runtime operations.
    </p>

    <div class="hero-grid">
      <div class="big-idea">
        <div style="font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;opacity:.75;font-weight:900">The one sentence everyone should remember</div>
        <div style="font-size:clamp(1.5rem,3vw,2.55rem);line-height:1.1;font-weight:900;margin-top:10px">
          We are <strong>not rebuilding Dify.</strong><br>
          We are building <strong>our own product UI</strong> on top of Dify.
        </div>
        <div style="margin-top:18px;color:#dce7ff">
          Think of Dify as the engine, gearbox and electronics inside a car. Our product is the dashboard, controls,
          body design and customer experience.
        </div>
      </div>

      <div class="paper hero-card">
        <svg viewBox="0 0 620 430" role="img" aria-label="Car analogy diagram">
          <defs>
            <linearGradient id="gCar" x1="0" x2="1">
              <stop offset="0" stop-color="#4f7cff"/><stop offset="1" stop-color="#7c5cff"/>
            </linearGradient>
          </defs>
          <rect x="25" y="35" width="570" height="350" rx="30" fill="#f6f9ff" stroke="#dbe6f7"/>
          <text x="310" y="76" text-anchor="middle" font-size="26" font-weight="900" fill="#1e2e52">🚙 PRODUCT ANALOGY</text>
          <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)"/>
          <circle cx="170" cy="320" r="43" fill="#17213b"/><circle cx="170" cy="320" r="19" fill="#dce5f5"/>
          <circle cx="455" cy="320" r="43" fill="#17213b"/><circle cx="455" cy="320" r="19" fill="#dce5f5"/>
          <rect x="210" y="190" width="190" height="65" rx="12" fill="#17213b"/>
          <text x="305" y="218" text-anchor="middle" font-size="18" font-weight="900" fill="#fff">OUR UI</text>
          <text x="305" y="240" text-anchor="middle" font-size="13" fill="#cfe0ff">what the customer sees</text>
          <rect x="260" y="270" width="100" height="42" rx="10" fill="#ffd166"/>
          <text x="310" y="296" text-anchor="middle" font-size="16" font-weight="900" fill="#493800">DIFY</text>
          <path d="M310 255 V270" stroke="#fff" stroke-width="4"/>
          <text x="310" y="370" text-anchor="middle" font-size="14" fill="#5d6b82">Same engine. Our own vehicle.</text>
        </svg>
      </div>
    </div>
    <div class="note" style="margin-top:22px">
      <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.
      The current Dify license specifically protects its frontend branding and notes that the product’s interactive design is protected by an appearance patent.
    </div>
  </div>
</header>

<nav class="toc">
  <div class="container toc-inner">
    <a href="#idea">1. The Idea</a>
    <a href="#layers">2. What We Build</a>
    <a href="#journey">3. What Happens on Click</a>
    <a href="#api">4. API Adapter</a>
    <a href="#deployment">5. Customer Deployment</a>
    <a href="#opensource">6. Existing Open Source</a>
    <a href="#license">7. Guardrails</a>
    <a href="#roadmap">8. Roadmap</a>
    <a href="#mvp">9. MVP</a>
  </div>
</nav>

<main>

<section id="idea">
  <div class="container">
    <div class="kicker">Chapter 1</div>
    <h2>The idea in plain English</h2>
    <p class="section-intro">
      A customer should feel like they are using <strong>our AI automation platform</strong>. They create agents, drag workflow nodes,
      connect company systems, add knowledge and run automations. Underneath, Dify does the heavy execution work.
    </p>

    <div class="diagram">
      <svg viewBox="0 0 1100 450">
        <defs>
          <marker id="arr1" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
            <path d="M0,0 L0,6 L9,3 z" fill="#52698f"/>
          </marker>
        </defs>
        <rect x="30" y="32" width="1040" height="380" rx="28" fill="#f8fbff" stroke="#dce7f6"/>
        <text x="550" y="73" text-anchor="middle" font-size="24" font-weight="900" fill="#17213b">THE PRODUCT STACK</text>

        <rect x="70" y="120" width="245" height="220" rx="22" fill="#eef3ff" stroke="#afc4ff" stroke-width="2"/>
        <text x="192" y="158" text-anchor="middle" font-size="22" font-weight="900" fill="#315bd8">OUR PRODUCT</text>
        <text x="192" y="190" text-anchor="middle" font-size="15" fill="#465c7f">Dashboard</text>
        <text x="192" y="218" text-anchor="middle" font-size="15" fill="#465c7f">Visual Builder</text>
        <text x="192" y="246" text-anchor="middle" font-size="15" fill="#465c7f">Agent Setup</text>
        <text x="192" y="274" text-anchor="middle" font-size="15" fill="#465c7f">Knowledge UI</text>
        <text x="192" y="302" text-anchor="middle" font-size="15" fill="#465c7f">Connections + Logs</text>

        <rect x="425" y="120" width="250" height="220" rx="22" fill="#f4efff" stroke="#c8b6ff" stroke-width="2"/>
        <text x="550" y="158" text-anchor="middle" font-size="22" font-weight="900" fill="#6845d6">DIFY ENGINE</text>
        <text x="550" y="190" text-anchor="middle" font-size="15" fill="#5b4c76">Workflow runtime</text>
        <text x="550" y="218" text-anchor="middle" font-size="15" fill="#5b4c76">Agent execution</text>
        <text x="550" y="246" text-anchor="middle" font-size="15" fill="#5b4c76">RAG / datasets</text>
        <text x="550" y="274" text-anchor="middle" font-size="15" fill="#5b4c76">Tools / plugins</text>
        <text x="550" y="302" text-anchor="middle" font-size="15" fill="#5b4c76">Runs / tracing</text>

        <rect x="785" y="120" width="245" height="220" rx="22" fill="#ecfbf4" stroke="#a8e4c7" stroke-width="2"/>
        <text x="907" y="158" text-anchor="middle" font-size="22" font-weight="900" fill="#16845a">OUTSIDE WORLD</text>
        <text x="907" y="190" text-anchor="middle" font-size="15" fill="#426b5a">OpenAI / Claude</text>
        <text x="907" y="218" text-anchor="middle" font-size="15" fill="#426b5a">Gemini / private LLM</text>
        <text x="907" y="246" text-anchor="middle" font-size="15" fill="#426b5a">CRM / ERP</text>
        <text x="907" y="274" text-anchor="middle" font-size="15" fill="#426b5a">Email / SharePoint</text>
        <text x="907" y="302" text-anchor="middle" font-size="15" fill="#426b5a">Databases / APIs</text>

        <line x1="315" y1="230" x2="420" y2="230" stroke="#52698f" stroke-width="4" marker-end="url(#arr1)"/>
        <line x1="675" y1="230" x2="780" y2="230" stroke="#52698f" stroke-width="4" marker-end="url(#arr1)"/>
        <text x="367" y="210" text-anchor="middle" font-size="13" font-weight="800" fill="#52698f">OUR ADAPTER</text>
        <text x="727" y="210" text-anchor="middle" font-size="13" font-weight="800" fill="#52698f">CONNECTORS</text>
      </svg>
    </div>

    <div class="grid3" style="margin-top:18px">
      <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>
      <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>
      <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>
    </div>
  </div>
</section>

<section id="layers">
  <div class="container">
    <div class="kicker">Chapter 2</div>
    <h2>What exactly are we building?</h2>
    <p class="section-intro">The simplest way to divide the work is: <strong>customer-facing product layer</strong> vs <strong>execution layer</strong>.</p>

    <div class="grid2">
      <div class="card good">
        <div class="icon">👩‍🎨</div>
        <h3>WE BUILD THIS</h3>
        <ul class="checklist">
          <li>Our login, branding and navigation</li>
          <li>Agent creation screens</li>
          <li>Visual drag-and-drop workflow editor</li>
          <li>Knowledge-base management screens</li>
          <li>Connections / credentials UI</li>
          <li>Templates and starter workflows</li>
          <li>Human-friendly run history and error screens</li>
          <li>Role/permission rules appropriate for our customers</li>
          <li>Deployment/updater tooling for each customer</li>
        </ul>
      </div>

      <div class="card warn">
        <div class="icon">🧠</div>
        <h3>DIFY ALREADY DOES THIS</h3>
        <ul class="checklist">
          <li>Execute workflow graphs</li>
          <li>Run LLM and agent nodes</li>
          <li>Manage model-provider connections</li>
          <li>Run RAG / knowledge retrieval</li>
          <li>Execute tools and plugins</li>
          <li>Handle node variables and outputs</li>
          <li>Track workflow runs and traces</li>
          <li>Publish and execute applications</li>
          <li>Maintain internal workflow definitions</li>
        </ul>
      </div>
    </div>

    <div class="callout green">
      <strong>Why this matters:</strong> a normal “build our own agent platform” project can turn into years of engine work.
      With this architecture, our main engineering challenge becomes a much more manageable product problem:
      <strong>build a clean frontend + stable adapter to Dify.</strong>
    </div>

    <div class="diagram">
      <svg viewBox="0 0 1100 510">
        <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>
        <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>

        <rect x="40" y="75" width="1020" height="150" rx="25" fill="#edf4ff" stroke="#b9ccff"/>
        <text x="70" y="110" font-size="17" font-weight="900" fill="#315bd8">VISIBLE: OUR PRODUCT</text>
        <g font-size="14" font-weight="800" fill="#354968">
          <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>
          <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>
          <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>
          <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>
          <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>
        </g>

        <line x1="550" y1="225" x2="550" y2="275" stroke="#65799d" stroke-width="4" marker-end="url(#arr2)"/>
        <rect x="420" y="255" width="260" height="50" rx="14" fill="#17213b"/>
        <text x="550" y="286" text-anchor="middle" font-size="16" font-weight="900" fill="#fff">OUR DIFY ADAPTER API</text>

        <line x1="550" y1="305" x2="550" y2="350" stroke="#65799d" stroke-width="4" marker-end="url(#arr2)"/>

        <rect x="40" y="345" width="1020" height="130" rx="25" fill="#f5efff" stroke="#ccbaff"/>
        <text x="70" y="380" font-size="17" font-weight="900" fill="#6845d6">HIDDEN: DIFY RUNTIME</text>
        <g font-size="14" font-weight="800" fill="#4a3d64">
          <rect x="85" y="398" width="160" height="48" rx="12" fill="#fff"/><text x="165" y="428" text-anchor="middle">Workflow Engine</text>
          <rect x="270" y="398" width="150" height="48" rx="12" fill="#fff"/><text x="345" y="428" text-anchor="middle">Agent Runtime</text>
          <rect x="445" y="398" width="130" height="48" rx="12" fill="#fff"/><text x="510" y="428" text-anchor="middle">RAG</text>
          <rect x="600" y="398" width="150" height="48" rx="12" fill="#fff"/><text x="675" y="428" text-anchor="middle">Tools / Plugins</text>
          <rect x="775" y="398" width="180" height="48" rx="12" fill="#fff"/><text x="865" y="428" text-anchor="middle">Runs / Versions</text>
        </g>
      </svg>
    </div>
  </div>
</section>

<section id="journey">
  <div class="container">
    <div class="kicker">Chapter 3</div>
    <h2>What happens when a user drags a node?</h2>
    <p class="section-intro">This is the most important engineering flow for the team to understand.</p>

    <div class="diagram">
      <svg viewBox="0 0 1160 520">
        <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>
        <text x="580" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">EXAMPLE: USER CREATES “EMAIL → AI → APPROVAL → SEND”</text>

        <g font-size="14" font-weight="900" text-anchor="middle">
          <rect x="42" y="90" width="185" height="80" rx="18" fill="#eaf2ff" stroke="#a9c0ff" stroke-width="2"/>
          <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>

          <rect x="285" y="90" width="190" height="80" rx="18" fill="#edf9ff" stroke="#a4dfec" stroke-width="2"/>
          <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>

          <rect x="535" y="90" width="190" height="80" rx="18" fill="#f4efff" stroke="#c5b3ff" stroke-width="2"/>
          <text x="630" y="122" fill="#6845d6">3. ADAPTER</text><text x="630" y="146" fill="#5b4d79" font-weight="700">translates graph</text>

          <rect x="785" y="90" width="155" height="80" rx="18" fill="#fff5e8" stroke="#ffd19a" stroke-width="2"/>
          <text x="862" y="122" fill="#b56c12">4. DIFY</text><text x="862" y="146" fill="#7a654a" font-weight="700">stores draft</text>

          <rect x="995" y="90" width="125" height="80" rx="18" fill="#edfbf4" stroke="#a8e4c7" stroke-width="2"/>
          <text x="1057" y="122" fill="#16845a">5. RUN</text><text x="1057" y="146" fill="#4a6e5e" font-weight="700">executes</text>
        </g>

        <g stroke="#5c6f91" stroke-width="4" marker-end="url(#arr3)">
          <line x1="227" y1="130" x2="280" y2="130"/><line x1="475" y1="130" x2="530" y2="130"/>
          <line x1="725" y1="130" x2="780" y2="130"/><line x1="940" y1="130" x2="990" y2="130"/>
        </g>

        <rect x="90" y="230" width="980" height="220" rx="24" fill="#fff" stroke="#dbe4f0"/>
        <text x="580" y="270" text-anchor="middle" font-size="18" font-weight="900" fill="#233557">THE ACTUAL WORKFLOW THE USER SEES</text>

        <g text-anchor="middle" font-size="14" font-weight="900">
          <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>
          <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>
          <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>
          <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>
        </g>
        <g stroke="#5c6f91" stroke-width="4" marker-end="url(#arr3)">
          <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"/>
        </g>
      </svg>
    </div>

    <div class="grid4" style="margin-top:18px">
      <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>
      <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>
      <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>
      <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>
    </div>
  </div>
</section>

<section id="api">
  <div class="container">
    <div class="kicker">Chapter 4</div>
    <h2>The adapter is our safety wall</h2>
    <p class="section-intro">
      Dify’s normal public Service API is designed mainly for <em>running</em> apps. To reproduce Studio-like management functionality,
      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.
    </p>

    <div class="diagram">
      <svg viewBox="0 0 1100 500">
        <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>
        <rect x="65" y="60" width="220" height="340" rx="22" fill="#eef4ff" stroke="#afc4ff"/>
        <text x="175" y="98" text-anchor="middle" font-size="20" font-weight="900" fill="#315bd8">OUR FRONTEND</text>
        <text x="175" y="145" text-anchor="middle" font-size="14" fill="#4d6388">Create app</text>
        <text x="175" y="177" text-anchor="middle" font-size="14" fill="#4d6388">Edit graph</text>
        <text x="175" y="209" text-anchor="middle" font-size="14" fill="#4d6388">Knowledge</text>
        <text x="175" y="241" text-anchor="middle" font-size="14" fill="#4d6388">Models</text>
        <text x="175" y="273" text-anchor="middle" font-size="14" fill="#4d6388">Plugins</text>
        <text x="175" y="305" text-anchor="middle" font-size="14" fill="#4d6388">Versions</text>
        <text x="175" y="337" text-anchor="middle" font-size="14" fill="#4d6388">Runs</text>

        <rect x="405" y="100" width="290" height="260" rx="24" fill="#17213b"/>
        <text x="550" y="143" text-anchor="middle" font-size="22" font-weight="900" fill="#fff">OUR DIFY ADAPTER</text>
        <text x="550" y="187" text-anchor="middle" font-size="14" fill="#cbd8f1">Stable API for our frontend</text>
        <text x="550" y="220" text-anchor="middle" font-size="14" fill="#cbd8f1">Authentication + session handling</text>
        <text x="550" y="253" text-anchor="middle" font-size="14" fill="#cbd8f1">Our schema ↔ Dify schema</text>
        <text x="550" y="286" text-anchor="middle" font-size="14" fill="#cbd8f1">Version compatibility layer</text>
        <text x="550" y="319" text-anchor="middle" font-size="14" fill="#ffd166" font-weight="900">ONLY THIS LAYER KNOWS DIFY DETAILS</text>

        <rect x="815" y="60" width="220" height="340" rx="22" fill="#f4efff" stroke="#c5b3ff"/>
        <text x="925" y="98" text-anchor="middle" font-size="20" font-weight="900" fill="#6845d6">DIFY</text>
        <text x="925" y="145" text-anchor="middle" font-size="14" fill="#625376">Console endpoints</text>
        <text x="925" y="177" text-anchor="middle" font-size="14" fill="#625376">Workflow drafts</text>
        <text x="925" y="209" text-anchor="middle" font-size="14" fill="#625376">Datasets / RAG</text>
        <text x="925" y="241" text-anchor="middle" font-size="14" fill="#625376">Providers</text>
        <text x="925" y="273" text-anchor="middle" font-size="14" fill="#625376">Plugins</text>
        <text x="925" y="305" text-anchor="middle" font-size="14" fill="#625376">Publishing</text>
        <text x="925" y="337" text-anchor="middle" font-size="14" fill="#625376">Execution</text>

        <line x1="285" y1="230" x2="400" y2="230" stroke="#576b90" stroke-width="4" marker-end="url(#arr4)"/>
        <line x1="695" y1="230" x2="810" y2="230" stroke="#576b90" stroke-width="4" marker-end="url(#arr4)"/>
      </svg>
    </div>

    <div class="callout orange">
      <strong>Why the adapter matters:</strong> internal Dify endpoints may change between releases.
      If our UI calls Dify directly everywhere, every Dify upgrade can break dozens of screens.
      If everything goes through one adapter, we update one compatibility layer.
    </div>

    <div class="grid2">
      <div class="card good">
        <div class="icon">🛡️</div><h3>Good architecture</h3>
        <div class="code">Our UI
  ↓
/api/workflows
  ↓
DifyAdapter
  ↓
Dify console/runtime endpoints</div>
      </div>
      <div class="card bad">
        <div class="icon">💥</div><h3>Fragile architecture</h3>
        <div class="code">Page A → Dify endpoint X
Page B → Dify endpoint Y
Page C → Dify endpoint Z
Page D → direct DB write
...</div>
      </div>
    </div>
  </div>
</section>

<section id="deployment">
  <div class="container">
    <div class="kicker">Chapter 5</div>
    <h2>One dedicated environment per customer</h2>
    <p class="section-intro">
      Our intended commercial model is not “one Dify with many customer workspaces.” Instead, each company gets its own isolated deployment.
    </p>

    <div class="diagram">
      <svg viewBox="0 0 1160 560">
        <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>
        <text x="580" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">DEDICATED CUSTOMER DEPLOYMENT MODEL</text>

        <g>
          <rect x="55" y="85" width="310" height="400" rx="24" fill="#eef4ff" stroke="#afc4ff" stroke-width="2"/>
          <text x="210" y="122" text-anchor="middle" font-size="20" font-weight="900" fill="#315bd8">CUSTOMER A</text>
          <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>
          <line x1="210" y1="205" x2="210" y2="235" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
          <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>
          <line x1="210" y1="295" x2="210" y2="325" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
          <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>
          <text x="210" y="423" text-anchor="middle" font-size="13" fill="#506486">Own DB • Redis • files</text>
          <text x="210" y="447" text-anchor="middle" font-size="13" fill="#506486">Own credentials • LLMs</text>
        </g>

        <g>
          <rect x="425" y="85" width="310" height="400" rx="24" fill="#effbf5" stroke="#abe1c7" stroke-width="2"/>
          <text x="580" y="122" text-anchor="middle" font-size="20" font-weight="900" fill="#16845a">CUSTOMER B</text>
          <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>
          <line x1="580" y1="205" x2="580" y2="235" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
          <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>
          <line x1="580" y1="295" x2="580" y2="325" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
          <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>
          <text x="580" y="423" text-anchor="middle" font-size="13" fill="#506486">Own DB • Redis • files</text>
          <text x="580" y="447" text-anchor="middle" font-size="13" fill="#506486">Own credentials • LLMs</text>
        </g>

        <g>
          <rect x="795" y="85" width="310" height="400" rx="24" fill="#fff6e9" stroke="#ffd49f" stroke-width="2"/>
          <text x="950" y="122" text-anchor="middle" font-size="20" font-weight="900" fill="#b56c12">CUSTOMER C</text>
          <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>
          <line x1="950" y1="205" x2="950" y2="235" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
          <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>
          <line x1="950" y1="295" x2="950" y2="325" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
          <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>
          <text x="950" y="423" text-anchor="middle" font-size="13" fill="#506486">Own DB • Redis • files</text>
          <text x="950" y="447" text-anchor="middle" font-size="13" fill="#506486">Own credentials • LLMs</text>
        </g>
      </svg>
    </div>

    <div class="grid2" style="margin-top:18px">
      <div class="card good">
        <div class="icon">✅</div><h3>Our intended pattern</h3>
        <p><strong>One customer = one isolated deployment.</strong> Their workflows, credentials, knowledge and runtime are separated at the infrastructure level.</p>
      </div>
      <div class="card bad">
        <div class="icon">🚫</div><h3>Pattern to avoid without commercial authorization</h3>
        <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>
      </div>
    </div>
  </div>
</section>

<section id="opensource">
  <div class="container">
    <div class="kicker">Chapter 6</div>
    <h2>What has already been built by the open-source community?</h2>
    <p class="section-intro">
      We did not find a polished, complete “replacement Dify Studio” that we can simply clone and ship.
      But we found projects that solve important pieces of the puzzle—especially programmatic control of Dify.
    </p>

    <div class="grid3">
      <div class="card">
        <div class="icon">🧰</div>
        <h3>dify-mcp</h3>
        <span class="pill">Most important reference</span>
        <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>
        <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>
      </div>

      <div class="card">
        <div class="icon">🛠️</div>
        <h3>PSDify</h3>
        <span class="pill">Management automation</span>
        <p>A community project for programmatically managing Dify resources. Useful as another reference for automation around apps, knowledge and related workspace operations.</p>
        <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>
      </div>

      <div class="card">
        <div class="icon">🔄</div>
        <h3>coze2dify</h3>
        <span class="pill">Graph translation example</span>
        <p>Converts Coze workflows into Dify DSL/graphs. It has a frontend, backend, graph components and a conversion layer.</p>
        <p><strong>Why we care:</strong> it demonstrates the exact idea of translating a foreign workflow representation into a Dify-compatible graph.</p>
      </div>
    </div>

    <div class="callout">
      <strong>Important distinction:</strong> these are not “our finished frontend.” They are <strong>reference implementations and building blocks</strong>.
      We can learn from their API handling, graph translation, schema mapping and test strategies instead of reverse-engineering every Dify capability ourselves.
    </div>

    <div class="diagram">
      <svg viewBox="0 0 1100 520">
        <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>
        <text x="550" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">HOW WE USE OPEN-SOURCE REFERENCES</text>

        <rect x="60" y="100" width="230" height="90" rx="18" fill="#eef4ff" stroke="#b2c6ff"/>
        <text x="175" y="135" text-anchor="middle" font-size="17" font-weight="900" fill="#315bd8">dify-mcp</text>
        <text x="175" y="160" text-anchor="middle" font-size="13" fill="#526789">Console API knowledge</text>

        <rect x="60" y="220" width="230" height="90" rx="18" fill="#eefbf5" stroke="#abe1c7"/>
        <text x="175" y="255" text-anchor="middle" font-size="17" font-weight="900" fill="#16845a">PSDify</text>
        <text x="175" y="280" text-anchor="middle" font-size="13" fill="#526789">Management patterns</text>

        <rect x="60" y="340" width="230" height="90" rx="18" fill="#fff5e8" stroke="#ffd09b"/>
        <text x="175" y="375" text-anchor="middle" font-size="17" font-weight="900" fill="#b56c12">coze2dify</text>
        <text x="175" y="400" text-anchor="middle" font-size="13" fill="#526789">Graph conversion ideas</text>

        <rect x="430" y="165" width="260" height="200" rx="24" fill="#17213b"/>
        <text x="560" y="213" text-anchor="middle" font-size="21" font-weight="900" fill="#fff">OUR ADAPTER</text>
        <text x="560" y="250" text-anchor="middle" font-size="13" fill="#d3dff5">Our schemas</text>
        <text x="560" y="278" text-anchor="middle" font-size="13" fill="#d3dff5">Auth / sessions</text>
        <text x="560" y="306" text-anchor="middle" font-size="13" fill="#d3dff5">Compatibility</text>
        <text x="560" y="334" text-anchor="middle" font-size="13" fill="#ffd166">Tests + version gates</text>

        <rect x="830" y="185" width="210" height="160" rx="24" fill="#f3edff" stroke="#c5b2ff"/>
        <text x="935" y="230" text-anchor="middle" font-size="22" font-weight="900" fill="#6845d6">DIFY</text>
        <text x="935" y="263" text-anchor="middle" font-size="13" fill="#635476">workflow engine</text>
        <text x="935" y="289" text-anchor="middle" font-size="13" fill="#635476">agents • RAG • tools</text>
        <text x="935" y="315" text-anchor="middle" font-size="13" fill="#635476">runtime + persistence</text>

        <g stroke="#617495" stroke-width="4" marker-end="url(#arr6)">
          <line x1="290" y1="145" x2="425" y2="215"/>
          <line x1="290" y1="265" x2="425" y2="265"/>
          <line x1="290" y1="385" x2="425" y2="315"/>
          <line x1="690" y1="265" x2="825" y2="265"/>
        </g>
      </svg>
    </div>
  </div>
</section>

<section id="license">
  <div class="container">
    <div class="kicker">Chapter 7</div>
    <h2>Licensing and design guardrails</h2>
    <p class="section-intro">
      These are product-engineering guardrails, not legal advice. Before commercial launch, we should obtain written confirmation from Dify for our exact deployment model.
    </p>

    <div class="grid3">
      <div class="card good">
        <div class="icon">✅</div><h3>Current license explicitly allows</h3>
        <p>Commercial use including using Dify as a <strong>backend service for other applications</strong> or as an application-development platform.</p>
      </div>
      <div class="card warn">
        <div class="icon">⚠️</div><h3>Multi-tenant restriction</h3>
        <p>The current license says operating a multi-tenant environment using Dify source requires written authorization; a tenant is defined as a workspace.</p>
      </div>
      <div class="card warn">
        <div class="icon">🎨</div><h3>Frontend / appearance</h3>
        <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>
      </div>
    </div>

    <div class="grid2" style="margin-top:18px">
      <div class="card good">
        <h3>✅ Our design goal</h3>
        <ul class="checklist">
          <li>Same category of capabilities</li>
          <li>Our own navigation and information architecture</li>
          <li>Our own visual node components</li>
          <li>Our own onboarding and terminology</li>
          <li>Our own workflow UX conventions</li>
          <li>Dedicated Dify deployment per customer</li>
        </ul>
      </div>
      <div class="card bad">
        <h3>❌ Do not aim for</h3>
        <ul class="checklist xlist">
          <li>Pixel-for-pixel copy of Dify</li>
          <li>Cloning every interaction exactly</li>
          <li>Taking Dify frontend and simply hiding branding</li>
          <li>One shared Dify with a workspace for every customer without authorization</li>
          <li>UI code tightly coupled to undocumented Dify endpoints everywhere</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<section id="roadmap">
  <div class="container">
    <div class="kicker">Chapter 8</div>
    <h2>Recommended build roadmap</h2>
    <p class="section-intro">Do not rebuild every Dify screen on day one. Prove the adapter and the visual builder first.</p>

    <div class="timeline">
      <div class="step">
        <div class="num">1</div>
        <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>
      </div>
      <div class="step">
        <div class="num">2</div>
        <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>
      </div>
      <div class="step">
        <div class="num">3</div>
        <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>
      </div>
      <div class="step">
        <div class="num">4</div>
        <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>
      </div>
      <div class="step">
        <div class="num">5</div>
        <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>
      </div>
      <div class="step">
        <div class="num">6</div>
        <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>
      </div>
    </div>
  </div>
</section>

<section id="mvp">
  <div class="container">
    <div class="kicker">Chapter 9</div>
    <h2>What should our first MVP actually contain?</h2>
    <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>

    <div class="grid4">
      <div class="card"><div class="icon">🏠</div><h3>Dashboard</h3><p>Agents, workflows, recent runs, templates.</p></div>
      <div class="card"><div class="icon">🧩</div><h3>Workflow Builder</h3><p>Drag, connect, configure, test and publish.</p></div>
      <div class="card"><div class="icon">🤖</div><h3>Agent Setup</h3><p>Instructions, model, tools, knowledge and variables.</p></div>
      <div class="card"><div class="icon">📚</div><h3>Knowledge</h3><p>Upload documents, see indexing status, test retrieval.</p></div>
      <div class="card"><div class="icon">🔌</div><h3>Connections</h3><p>Model providers, APIs, credentials and MCP/tool endpoints.</p></div>
      <div class="card"><div class="icon">🧪</div><h3>Test Run</h3><p>Run workflow from the builder with sample input.</p></div>
      <div class="card"><div class="icon">🔎</div><h3>Run Inspector</h3><p>See every node, timing, output and error in simple language.</p></div>
      <div class="card"><div class="icon">🚀</div><h3>Publish</h3><p>Activate a workflow/app after validation.</p></div>
    </div>

    <div class="callout green">
      <strong>MVP success test:</strong> take a teammate who has never used Dify. Ask them to create:
      <em>“When a support request arrives, classify it, search our documents, draft a reply, ask for approval and send it.”</em>
      If they can build and understand it inside our UI, our product concept is working.
    </div>

    <div class="diagram">
      <svg viewBox="0 0 1130 560">
        <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>
        <text x="565" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">MVP WORKFLOW EXPERIENCE</text>

        <rect x="70" y="80" width="990" height="375" rx="30" fill="#f8fbff" stroke="#dbe5f3"/>
        <rect x="95" y="105" width="180" height="325" rx="20" fill="#17213b"/>
        <text x="185" y="142" text-anchor="middle" font-size="17" font-weight="900" fill="#fff">NODE LIBRARY</text>
        <g fill="#fff" font-size="13" font-weight="800">
          <rect x="117" y="170" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="196" text-anchor="middle">⚡ Trigger</text>
          <rect x="117" y="224" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="250" text-anchor="middle">🤖 AI Agent</text>
          <rect x="117" y="278" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="304" text-anchor="middle">📚 Knowledge</text>
          <rect x="117" y="332" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="358" text-anchor="middle">🔀 Condition</text>
        </g>

        <rect x="300" y="105" width="735" height="325" rx="20" fill="#fff" stroke="#dce5f0"/>
        <text x="325" y="140" font-size="14" font-weight="900" fill="#50627f">WORKFLOW CANVAS</text>

        <g font-size="12" text-anchor="middle" font-weight="900">
          <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>
          <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>
          <rect x="720" y="145" width="140" height="60" rx="15" fill="#eaf9f1" stroke="#a0dfc2"/><text x="790" y="180" fill="#16845a">KNOWLEDGE</text>
          <rect x="720" y="270" width="140" height="60" rx="15" fill="#fff5e5" stroke="#ffd092"/><text x="790" y="305" fill="#b56c12">APPROVAL</text>
          <rect x="910" y="200" width="95" height="60" rx="15" fill="#eaf2ff" stroke="#a7bfff"/><text x="957" y="235" fill="#315bd8">SEND</text>
        </g>

        <g stroke="#566b91" stroke-width="4" fill="none" marker-end="url(#arr7)">
          <line x1="480" y1="230" x2="530" y2="230"/>
          <path d="M665 230 C690 230 690 175 715 175"/>
          <path d="M665 230 C690 230 690 300 715 300"/>
          <path d="M860 175 C885 175 880 220 905 225"/>
          <path d="M860 300 C890 300 880 245 905 238"/>
        </g>
        <rect x="772" y="470" width="263" height="55" rx="15" fill="#17213b"/>
        <text x="903" y="504" text-anchor="middle" font-size="16" font-weight="900" fill="#fff">▶ TEST WORKFLOW</text>
      </svg>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="kicker">Chapter 10</div>
    <h2>Technical structure we should aim for</h2>
    <p class="section-intro">A simple separation of responsibilities will keep the product maintainable.</p>

    <table class="compare">
      <thead><tr><th>Layer</th><th>Suggested responsibility</th><th>Possible technology</th></tr></thead>
      <tbody>
        <tr><td><strong>Web UI</strong></td><td>Dashboard, agent builder, workflow canvas, knowledge, settings</td><td>React / Next.js</td></tr>
        <tr><td><strong>Canvas</strong></td><td>Nodes, edges, zoom, selection, graph editing</td><td>React Flow / XYFlow</td></tr>
        <tr><td><strong>Our API</strong></td><td>Auth, validation, stable product endpoints</td><td>FastAPI / Node</td></tr>
        <tr><td><strong>Dify Adapter</strong></td><td>Translate our objects into Dify objects; handle Dify upgrades</td><td>Dedicated service/module</td></tr>
        <tr><td><strong>Dify</strong></td><td>Workflow/agent/RAG/tool execution</td><td>Self-hosted Dify</td></tr>
        <tr><td><strong>Customer data</strong></td><td>Runtime DB, cache, files, vector storage</td><td>Dedicated per deployment</td></tr>
        <tr><td><strong>External systems</strong></td><td>LLMs, APIs, email, CRM, ERP, MCP, databases</td><td>Provider/plugin/tool integrations</td></tr>
      </tbody>
    </table>
  </div>
</section>

<section>
  <div class="container">
    <div class="kicker">Chapter 11</div>
    <h2>Three risks the team must design for</h2>

    <div class="grid3">
      <div class="card warn">
        <div class="icon">🔁</div>
        <h3>1. Dify API changes</h3>
        <p>Some Studio-management behavior relies on console/internal surfaces, not only the stable public runtime API.</p>
        <p><strong>Mitigation:</strong> adapter layer + pin Dify versions + compatibility tests before upgrades.</p>
      </div>
      <div class="card warn">
        <div class="icon">🧱</div>
        <h3>2. Trying to build too much UI</h3>
        <p>Copying every Dify screen immediately will waste time and make the product complicated.</p>
        <p><strong>Mitigation:</strong> start with the 20% of features that unlock 80% of customer workflows.</p>
      </div>
      <div class="card warn">
        <div class="icon">⚖️</div>
        <h3>3. License / design assumptions</h3>
        <p>Licensing terms and upstream behavior can change.</p>
        <p><strong>Mitigation:</strong> dedicated deployments, original UI, written confirmation from Dify before commercial scale.</p>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="kicker">Final page</div>
    <h2>The mental model to leave with</h2>

    <div class="big-idea">
      <div class="quote" style="color:white;font-size:clamp(1.45rem,3vw,2.4rem)">
        “Our customer should feel like they are using <span style="color:#ffd166">our platform</span>.
        Our engineers should feel like they are using <span style="color:#9be5ff">Dify as an engine</span>.”
      </div>
    </div>

    <div class="grid3" style="margin-top:20px">
      <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>
      <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>
      <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>
    </div>

    <div class="callout green" style="margin-top:24px">
      <strong>The strategic advantage:</strong> if we design the adapter well, our product is not permanently trapped inside Dify.
      Our frontend speaks <em>our own workflow model</em>. Today the adapter compiles it to Dify. In the future, another adapter could target
      LangGraph, Temporal or another runtime without redesigning the customer experience.
    </div>
  </div>
</section>

<section>
  <div class="container">
    <span class="stamp">Sources checked • October 2026</span>
    <h2 style="font-size:2rem;margin-top:12px">Source notes</h2>
    <p class="section-intro">These links are included so engineering and legal can verify the assumptions directly.</p>
    <div class="source-list">
      <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>
      <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>
      <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>
      <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>
    </div>
    <div class="note" style="margin-top:20px">
      <strong>Not legal advice.</strong> Before selling the product, send Dify a short architecture diagram showing
      “our UI → our adapter → one dedicated Dify deployment per customer” and obtain written confirmation that the intended commercial use is acceptable.
    </div>
  </div>
</section>

</main>

<footer class="footer">
  <div class="container">
    <div class="keyline"></div>
    <strong>Internal team explainer:</strong> Dify-powered agentic platform architecture.<br>
    Designed to be read like a visual textbook rather than a software specification.
  </div>
</footer>

</body>
</html>