# Baoyu Article Illustrator

> Baoyu Article Illustrator

- Skill: `lucadominguez/baoyu-article-illustrator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lucadominguez/baoyu-article-illustrator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lucadominguez/baoyu-article-illustrator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: lucadominguez (https://skillmd.com/u/lucadominguez)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lucadominguez/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

| Type | What it is | When to use |
|------|-----------|------------|
| **Mechanism** | Molecular pathway cascade (receptor → kinase → effect) | Mechanism deep-dive section |
| **Comparison** | Side-by-side compound/treatment comparison | Evidence section |
| **Timeline** | Temporal sequence of events after administration | Onset/duration section |
| **Concept** | Abstract idea visualization (e.g., "synaptic disconnection") | Context/intro section |
| **Anatomy** | Brain region or cellular diagram with labels | Any section referencing specific regions |
| **Protocol** | Visual dosing schedule or administration guide | Protocol section |

## 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

```python
# 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

| Need | Tool | Output |
|------|------|--------|
| Molecular pathway cascade | SVG (this skill) | `.svg` file |
| Cloud architecture diagram | `architecture-diagram` skill | HTML with SVG |
| Hand-drawn concept map | `excalidraw` skill | `.excalidraw` JSON |
| Data chart | `scientific-charts` skill | `.png` |
| Data infographic | `baoyu-infographic` skill | `.html` |

## 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.