# Tools Visual Workflows

> Communicate multi-step workflows using consistent ASCII flowcharts and timelines that paste cleanly into PRs, issues, and chats.

- Skill: `tjboudreaux/tools-visual-workflows` (Agent Skill)
- Install (CLI): `npx skillmds@latest add tjboudreaux/tools-visual-workflows`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tjboudreaux/tools-visual-workflows/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tjboudreaux (https://skillmd.com/u/tjboudreaux)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tjboudreaux/tools-visual-workflows

---


# Visual Workflow Blueprints

## Intent
- Speed up comprehension of complex processes (PR lifecycle, launch plan, triage ops) via monospaced diagrams.
- Provide reusable templates and conventions for both macOS/Linux terminals and Windows consoles.

## Inputs
1. Workflow steps, roles, decision points.
2. Target medium (GitHub comment, Slack, Notion, terminal output).
3. Required metadata (owners, SLAs, tools).

## Workflow
1. **Select diagram type**
   - Flowchart (boxes/arrows) for branching logic.
   - Timeline/swimlane for sequential steps.
2. **Use standard glyphs**
   - Start/End: `(start)` `(end)`
   - Process: `[ action ]`
   - Decision: `{ condition? }`
   - Arrows: `-->`, `==>`, `~~>` for async.
3. **Build with templates**
   - Flow template:
     ```
     (start)
       |
     [Step 1]
       |
     {Decision?}
      /   \
    yes   no
     ```
   - Timeline template:
     ```
     Day 0  Day 3  Day 7
     |-----|-----|-----|
     Dev   QA    Launch
     ```
4. **Annotate with data**
   - Include owners (`@alice`), tooling (`gh pr checks`), or SLA markers (`<24h`).
5. **Validate readability**
   - View in plain text viewer; avoid tabs; max width 80 chars.

## Verification
- Diagram renders without wrapping in GitHub/CLI.
- Each decision path labeled clearly.
- Stored alongside workflow documentation (e.g., `.factory/docs/visuals`).