事例紹介: 技術プレゼンテーションスライドの作成

from drawlib.canvas import save, setup
from drawlib.icons import phosphor
from drawlib.lines import line, lines
from drawlib.shapes import rectangle
from drawlib.styles import Styles
from drawlib.text import text

setup(width=142, height=78)

rectangle((71.0, 39.0), width=138.0, height=74.0, style=Styles.Neutral.patch(shape_r=2.5))
text(
    (71.0, 70.5),
    "The 9-Step Human-AI Collaborative Technical Slide Workflow",
    style=Styles.DarkBold.patch(text_size=12.5),
)

# Row 1: Steps 1 to 5 (Scaffolding -> Planning -> Generation -> AI Self-Review)
row1 = [
    (17.0, "1. Init Project", "drawlib init slide\nTheme & utils.py", phosphor.terminal_window, Styles.PrimaryNeutral, Styles.PrimaryBold),
    (44.0, "2. AI Discussion", "Brainstorm story\n4-Act narrative arc", phosphor.chats_circle, Styles.White, Styles.DarkBold),
    (71.0, "3. _PLAN File", "_CONTENTS_PLANNING\nIgnored by build", phosphor.file_dashed, Styles.SecondaryNeutral, Styles.SecondaryBold),
    (98.0, "4. Draft Slides", "::: block (visuals)\n::: note (details)", phosphor.presentation_chart, Styles.White, Styles.DarkBold),
    (125.0, "5. AI Self-Check", "720pt font math\nMultimodal fix", phosphor.eye, Styles.PrimaryNeutral, Styles.PrimaryBold),
]

for cx, title, desc, icon_fn, cstyle, tstyle in row1:
    rectangle((cx, 53.5), width=23.5, height=21.0, style=cstyle.patch(shape_r=1.8))
    icon_fn((cx, 60.0), width=3.8, style=tstyle)
    text((cx, 54.5), title, style=tstyle.patch(text_size=10.5))
    text((cx, 48.0), desc, style=Styles.Dark.patch(text_size=9.5))

for x0, x1 in [(28.8, 32.2), (55.8, 59.2), (82.8, 86.2), (109.8, 113.2)]:
    line((x0, 53.5), (x1, 53.5), arrow_head="->", style=Styles.DarkBold)

# Orthogonal connector from Step 5 down to Row 2 (Step 6)
lines(
    [(125.0, 43.0), (125.0, 38.0), (30.5, 38.0), (30.5, 33.0)],
    arrow_head="->",
    style=Styles.PrimaryBold,
)

# Row 2: Steps 6 to 9 (Human Review <-> AI Iteration Loop -> Final Deck)
row2 = [
    (30.5, "6. Human Review", "Inspect story flow\n& domain nuance", phosphor.user_check, Styles.White, Styles.DarkBold),
    (61.5, "7. Request Changes", "Add PDCA & GeoMap\nReorder PoW -> EDoS", phosphor.arrows_left_right, Styles.SecondaryNeutral, Styles.SecondaryBold),
    (92.5, "8. AI Refinement", "Build new diagrams\nCodify slide rules", phosphor.wrench, Styles.PrimaryNeutral, Styles.PrimaryBold),
    (122.5, "9. Final Deck", "Repeat 6-8 to polish\n27-Slide HTML & PDF", phosphor.check_circle, Styles.PrimaryFlat, Styles.WhiteBold),
]

for cx, title, desc, icon_fn, cstyle, tstyle in row2:
    is_final = (cstyle == Styles.PrimaryFlat)
    rectangle((cx, 22.5), width=26.5, height=21.0, style=cstyle.patch(shape_r=1.8))
    icon_fn((cx, 29.0), width=3.8, style=tstyle)
    text((cx, 23.5), title, style=tstyle.patch(text_size=10.5))
    d_st = Styles.White.patch(text_size=9.5) if is_final else Styles.Dark.patch(text_size=9.5)
    text((cx, 17.0), desc, style=d_st)

line((43.8, 22.5), (48.2, 22.5), arrow_head="->", style=Styles.DarkBold)
line((74.8, 22.5), (79.2, 22.5), arrow_head="->", style=Styles.DarkBold)
line((105.8, 22.5), (109.2, 22.5), arrow_head="->", style=Styles.PrimaryBold)

# Iterative feedback loop U-connector between Step 8 and Step 6
lines(
    [(92.5, 12.0), (92.5, 6.2), (30.5, 6.2), (30.5, 12.0)],
    arrow_head="->",
    style=Styles.AccentBold,
)
rectangle((61.5, 6.2), width=46.0, height=4.6, style=Styles.White.patch(shape_r=1.0))
text((61.5, 6.2), "Iterative Human-AI Loop (Steps 6 -> 7 -> 8)", style=Styles.AccentBold.patch(text_size=9.8))

save()

from drawlib.canvas import save, setup
from drawlib.icons import phosphor
from drawlib.lines import line
from drawlib.shapes import rectangle
from drawlib.styles import Styles
from drawlib.text import text

setup(width=136, height=58)

rectangle((68.0, 29.0), width=132.0, height=54.0, style=Styles.Neutral.patch(shape_r=2.5))
text(
    (68.0, 50.5),
    "Dual-Layer Slide Architecture: Audience Stage vs. Presenter View",
    style=Styles.DarkBold.patch(text_size=12.2),
)

# Left Card: Visible Slide Stage (::: block)
rectangle((36.5, 25.0), width=58.0, height=39.0, style=Styles.PrimaryNeutral.patch(shape_r=2.0))
rectangle((36.5, 40.5), width=54.0, height=5.8, style=Styles.PrimaryFlat.patch(shape_r=1.2))
text((36.5, 40.5), "Layer 1: Audience Stage (::: block)", style=Styles.WhiteBold.patch(text_size=11.0))

phosphor.monitor_play((16.5, 31.5), width=4.8, style=Styles.PrimaryBold)
text((22.0, 33.0), "Visual-First & Scannable (<5 sec)", style=Styles.DarkBold.patch(text_size=10.5, halign="left"))
text(
    (12.0, 18.5),
    "• 1920x1080 coordinate stage\n"
    "• Max 3–4 short keyword bullets on left\n"
    "• High-level Drawlib diagram is the Hero\n"
    "• Large, high-contrast labels (>= 18px)",
    style=Styles.Dark.patch(text_size=10.0, halign="left"),
)

# Center Divider
line((65.8, 25.0), (70.2, 25.0), arrow_head="<->", style=Styles.DarkBold)

# Right Card: Presenter Console (::: note)
rectangle((99.5, 25.0), width=58.0, height=39.0, style=Styles.SecondaryNeutral.patch(shape_r=2.0))
rectangle((99.5, 40.5), width=54.0, height=5.8, style=Styles.DarkFlat.patch(shape_r=1.2))
text((99.5, 40.5), "Layer 2: Speaker Notes (::: note)", style=Styles.WhiteBold.patch(text_size=11.0))

phosphor.microphone_stage((79.5, 31.5), width=4.8, style=Styles.SecondaryBold)
text((85.0, 33.0), "Deep Technical Context (Press 'P')", style=Styles.DarkBold.patch(text_size=10.5, halign="left"))
text(
    (75.0, 18.5),
    "• Full narrative & spoken transitions\n"
    "• Exact WAF expressions & cost formulas\n"
    "• Visible in Presenter View & standalone\n"
    "• Keeps the main slide clutter-free",
    style=Styles.Dark.patch(text_size=10.0, halign="left"),
)

save()

from drawlib.canvas import save, setup
from drawlib.icons import phosphor
from drawlib.lines import line
from drawlib.shapes import rectangle
from drawlib.styles import Styles
from drawlib.text import text

setup(width=138, height=62)

rectangle((69.0, 31.0), width=134.0, height=58.0, style=Styles.Neutral.patch(shape_r=2.5))
text(
    (69.0, 54.5),
    "Iterative Evolution: From Initial AI Draft to Final 27-Slide Narrative",
    style=Styles.DarkBold.patch(text_size=12.2),
)

cards = [
    (
        24.5,
        "Iteration 1: Adaptation Loops",
        "Human Feedback:\n\"Both defender and attacker\nran iterative PDCA loops.\"",
        "AI Implementation:\nAdded 2 symmetric 5-node\nCycle slides at Act 2 start\ncontrasting SRE vs. Botnet.",
        phosphor.arrows_clockwise,
        Styles.PrimaryNeutral,
        Styles.PrimaryFlat,
    ),
    (
        69.0,
        "Iteration 2: 4-Wave GeoMap",
        "Human Feedback:\n\"Use GeoMap to vividly show\nCN -> Asia -> World -> JP.\"",
        "AI Implementation:\nReplaced 1 static slide with\n4 sequential GeoMap slides\nwith curved attack arcs.",
        phosphor.globe_hemisphere_east,
        Styles.SecondaryNeutral,
        Styles.AccentFlat,
    ),
    (
        113.5,
        "Iteration 3: PoW -> EDoS Bridge",
        "Human Feedback:\n\"Move PoW to Act 3 start & add\na goal-shift bridge slide.\"",
        "AI Implementation:\nMoved SHA-256 PoW to Act 3\nand added Before/After PoW\nattacker goal-shift diagram.",
        phosphor.shuffle,
        Styles.PrimaryNeutral,
        Styles.DarkFlat,
    ),
]

for cx, title, fb_text, ai_text, icon_fn, cstyle, hstyle in cards:
    rectangle((cx, 27.0), width=40.5, height=44.0, style=cstyle.patch(shape_r=2.0))
    rectangle((cx, 44.5), width=37.5, height=6.0, style=hstyle.patch(shape_r=1.2))
    text((cx, 44.5), title, style=Styles.WhiteBold.patch(text_size=10.5))

    icon_fn((cx - 14.5, 34.5), width=4.2, style=Styles.DarkBold)
    text((cx - 10.0, 34.5), fb_text, style=Styles.Dark.patch(text_size=9.5, halign="left"))

    line((cx - 16.0, 25.5), (cx + 16.0, 25.5), style=Styles.Dark.patch(line_width=0.8, line_style="dashed"))

    phosphor.sparkle((cx - 14.5, 15.5), width=4.2, style=Styles.PrimaryBold)
    text((cx - 10.0, 15.5), ai_text, style=Styles.DarkBold.patch(text_size=9.5, halign="left"))

save()