Baoyu Article Illustrator

Baoyu Article Illustrator

Generate section-level illustrations for articles. Each illustration follows a consistent Type × Style × Palette system so every visual in the article feels like it belongs to the same piece.

Illustration Types

Style System

All illustrations share:

Dark background (#1a1a2e)
Primary stroke (#6366f1, 2px)
Secondary stroke (#475569, 1px)
Label text (#e2e8f0, 10px)
Title text (#e2e8f0, 14px, bold)
Node fill (#1e293b with #6366f1 border)
Arrow color (#6366f1 or #475569 for secondary)
Connection lines (#334155, 1.5px)
Radius: 8px for boxes, 20px for circular nodes

Mechanism Pathway Template

# Generate an SVG mechanism diagram programmatically
svg = '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 300" style="background:#1a1a2e;font-family:Inter,sans-serif">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#6366f1"/>
    </marker>
    <filter id="glow">
      <feGaussianBlur stdDeviation="3" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
  </defs>
  
  <text x="450" y="30" text-anchor="middle" fill="#e2e8f0" font-size="14" font-weight="bold">Ketamine Antidepressant Mechanism</text>
  
  <!-- Nodes -->
  <rect x="20" y="120" width="100" height="40" rx="8" fill="#1e293b" stroke="#6366f1" stroke-width="2"/>
  <text x="70" y="145" text-anchor="middle" fill="#e2e8f0" font-size="11">NMDAR Block</text>
  
  <line x1="120" y1="140" x2="155" y2="140" stroke="#6366f1" stroke-width="2" marker-end="url(#arrow)"/>
  
  <rect x="160" y="120" width="100" height="40" rx="8" fill="#1e293b" stroke="#6366f1" stroke-width="2"/>
  <text x="210" y="140" text-anchor="middle" fill="#e2e8f0" font-size="10">Glutamate</text>
  <text x="210" y="153" text-anchor="middle" fill="#e2e8f0" font-size="10">Surge</text>
  
  <line x1="260" y1="140" x2="295" y2="140" stroke="#6366f1" stroke-width="2" marker-end="url(#arrow)"/>
  
  <rect x="300" y="120" width="100" height="40" rx="8" fill="#1e293b" stroke="#6366f1" stroke-width="2"/>
  <text x="350" y="140" text-anchor="middle" fill="#e2e8f0" font-size="10">AMPA</text>
  <text x="350" y="153" text-anchor="middle" fill="#e2e8f0" font-size="10">Activation</text>
  
  <line x1="400" y1="140" x2="435" y2="140" stroke="#6366f1" stroke-width="2" marker-end="url(#arrow)"/>
  
  <ellipse cx="470" cy="140" rx="45" ry="22" fill="#1e293b" stroke="#ec4899" stroke-width="2"/>
  <text x="470" y="136" text-anchor="middle" fill="#e2e8f0" font-size="10">BDNF</text>
  <text x="470" y="150" text-anchor="middle" fill="#e2e8f0" font-size="10">Release</text>
  
  <line x1="515" y1="140" x2="550" y2="140" stroke="#ec4899" stroke-width="2" marker-end="url(#arrow)"/>
  
  <rect x="555" y="120" width="100" height="40" rx="8" fill="#1e293b" stroke="#ec4899" stroke-width="2"/>
  <text x="605" y="140" text-anchor="middle" fill="#e2e8f0" font-size="10">TrkB →</text>
  <text x="605" y="153" text-anchor="middle" fill="#e2e8f0" font-size="10">mTORC1</text>
  
  <line x1="655" y1="140" x2="690" y2="140" stroke="#ec4899" stroke-width="2" marker-end="url(#arrow)"/>
  
  <rect x="695" y="120" width="110" height="40" rx="8" fill="#1e293b" stroke="#10b981" stroke-width="2" filter="url(#glow)"/>
  <text x="750" y="136" text-anchor="middle" fill="#10b981" font-size="10" font-weight="bold">Synaptic</text>
  <text x="750" y="150" text-anchor="middle" fill="#10b981" font-size="10" font-weight="bold">Proteins</text>
  
  <!-- Inhibitory pathway (dashed) -->
  <rect x="20" y="200" width="100" height="36" rx="8" fill="#1e293b" stroke="#475569" stroke-width="1" stroke-dasharray="4,3"/>
  <text x="70" y="222" text-anchor="middle" fill="#64748b" font-size="9">GABA Interneuron</text>
  
  <line x1="70" y1="200" x2="70" y2="164" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="4,3"/>
  <text x="15" y="185" fill="#ef4444" font-size="8">disinhibits</text>
  
  <!-- Legend -->
  <rect x="20" y="260" width="12" height="12" rx="2" fill="#6366f1"/>
  <text x="38" y="271" fill="#94a3b8" font-size="9">NMDA-dependent</text>
  <rect x="160" y="260" width="12" height="12" rx="2" fill="#ec4899"/>
  <text x="178" y="271" fill="#94a3b8" font-size="9">BDNF/TrkB/mTOR</text>
  <rect x="320" y="260" width="12" height="12" rx="2" fill="#10b981"/>
  <text x="338" y="271" fill="#94a3b8" font-size="9">Final outcome</text>
  <rect x="440" y="260" width="12" height="12" rx="2" fill="#ef4444"/>
  <text x="458" y="271" fill="#94a3b8" font-size="9">Inhibitory pathway</text>
</svg>'''

with open('/tmp/mechanism.svg', 'w') as f:
    f.write(svg)
print("Mechanism diagram saved to /tmp/mechanism.svg")

When to Use Each Illustrator Tool

PITFALLS

1. SVG text rendering in Substack. Substack strips SVG files from uploads. Convert SVGs to PNG before embedding: rsvg-convert -w 1800 mechanism.svg -o mechanism.png or screenshot via browser.
2. Don't over-illustrate. One illustration per major section. More than 4-5 visuals and the article feels like a slide deck.
3. Labels must be readable at 400px wide. Test by scaling your SVG to 400px — if labels are illegible, increase font size.