Demonstrates how seq2boxes handles multiple input sequence diagrams that share common actors
Frontend Flow
Backend Flow
Original D2 Sequence Diagrams
// Frontend Flow
shape: sequence_diagram
browser: Browser
frontend: Frontend App
api: API Server
cache: Cache Service
browser -{{TAB_CONTENTS}}gt; frontend: Load Page
frontend -{{TAB_CONTENTS}}gt; api: Get User Data
api -{{TAB_CONTENTS}}gt; cache: Check Cache
cache -{{TAB_CONTENTS}}gt; api: Cache Miss
api -{{TAB_CONTENTS}}gt; frontend: User Data
frontend -{{TAB_CONTENTS}}gt; browser: Render Page
// Backend Flow
shape: sequence_diagram
scheduler: Job Scheduler
worker: Background Worker
api: API Server
cache: Cache Service
database: Database
scheduler -{{TAB_CONTENTS}}gt; worker: Trigger Sync Job
worker -{{TAB_CONTENTS}}gt; api: Request Data Update
api -{{TAB_CONTENTS}}gt; database: Fetch Latest Data
database -{{TAB_CONTENTS}}gt; api: Data Records
api -{{TAB_CONTENTS}}gt; cache: Update Cache
cache -{{TAB_CONTENTS}}gt; api: Cache Updated
api -{{TAB_CONTENTS}}gt; worker: Update Complete
worker -{{TAB_CONTENTS}}gt; scheduler: Job Finished
Generated D2 Code - Default Combined
# Command: ./seq2boxes frontend-flow.d2 backend-flow.d2
vars: {
d2-config: {
theme-id: 0
}
}
direction: right
# Messages from frontend-flow.d2
diagram_frontend_flow: {
style.fill: transparent
style.stroke: transparent
{{TAB_CONTENTS}}quot;Browser{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Frontend App{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;1. Load Page{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;Frontend App{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;2. Get User Data{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Cache Service{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;3. Check Cache{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;Cache Service{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;4. Cache Miss{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Frontend App{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;5. User Data{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;Frontend App{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Browser{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;6. Render Page{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
}
# Messages from backend-flow.d2
diagram_backend_flow: {
style.fill: transparent
style.stroke: transparent
{{TAB_CONTENTS}}quot;Job Scheduler{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Background Worker{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;1001. Trigger Sync Job{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;Background Worker{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;1002. Request Data Update{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Database{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;1003. Fetch Latest Data{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;Database{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;1004. Data Records{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Cache Service{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;1005. Update Cache{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;Cache Service{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;1006. Cache Updated{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Background Worker{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;1007. Update Complete{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#4caf50{{TAB_CONTENTS}}quot;
style.stroke-width: 2
}
{{TAB_CONTENTS}}quot;Background Worker{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Job Scheduler{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;1008. Job Finished{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
}
Generated D2 Code - Combined Simple Arrows
# Command: ./seq2boxes --arrows simple frontend-flow.d2 backend-flow.d2
vars: {
d2-config: {
theme-id: 0
}
}
direction: right
# Messages from frontend-flow.d2
diagram_frontend_flow: {
style.fill: transparent
style.stroke: transparent
{{TAB_CONTENTS}}quot;Browser{{TAB_CONTENTS}}quot; {{TAB_CONTENTS}}lt;-{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Frontend App{{TAB_CONTENTS}}quot;
{{TAB_CONTENTS}}quot;Frontend App{{TAB_CONTENTS}}quot; {{TAB_CONTENTS}}lt;-{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot;
{{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot; {{TAB_CONTENTS}}lt;-{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Cache Service{{TAB_CONTENTS}}quot;
}
# Messages from backend-flow.d2
diagram_backend_flow: {
style.fill: transparent
style.stroke: transparent
{{TAB_CONTENTS}}quot;Job Scheduler{{TAB_CONTENTS}}quot; {{TAB_CONTENTS}}lt;-{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Background Worker{{TAB_CONTENTS}}quot;
{{TAB_CONTENTS}}quot;Background Worker{{TAB_CONTENTS}}quot; {{TAB_CONTENTS}}lt;-{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot;
{{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot; {{TAB_CONTENTS}}lt;-{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Database{{TAB_CONTENTS}}quot;
{{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot; {{TAB_CONTENTS}}lt;-{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Cache Service{{TAB_CONTENTS}}quot;
}
Generated D2 Code - Frontend Only
# Command: ./seq2boxes frontend-flow.d2
vars: {
d2-config: {
theme-id: 0
}
}
direction: right
{{TAB_CONTENTS}}quot;Browser{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Frontend App{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;1. Load Page{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;Frontend App{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;2. Get User Data{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Cache Service{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;3. Check Cache{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;Cache Service{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;4. Cache Miss{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Frontend App{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;5. User Data{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;Frontend App{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Browser{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;6. Render Page{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
Generated D2 Code - Backend Only
# Command: ./seq2boxes backend-flow.d2
vars: {
d2-config: {
theme-id: 0
}
}
direction: right
{{TAB_CONTENTS}}quot;Job Scheduler{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Background Worker{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;1. Trigger Sync Job{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;Background Worker{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;2. Request Data Update{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Database{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;3. Fetch Latest Data{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;Database{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;4. Data Records{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Cache Service{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;5. Update Cache{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;Cache Service{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;6. Cache Updated{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}
{{TAB_CONTENTS}}quot;API Server{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Background Worker{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;7. Update Complete{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#4caf50{{TAB_CONTENTS}}quot;
style.stroke-width: 2
}
{{TAB_CONTENTS}}quot;Background Worker{{TAB_CONTENTS}}quot; -{{TAB_CONTENTS}}gt; {{TAB_CONTENTS}}quot;Job Scheduler{{TAB_CONTENTS}}quot;: {{TAB_CONTENTS}}quot;8. Job Finished{{TAB_CONTENTS}}quot; {
style.stroke: {{TAB_CONTENTS}}quot;#2196f3{{TAB_CONTENTS}}quot;
}