SUPPORT EMAIL ROUTING: A PROCESS DIAGRAM WITH EDITABLE LABELS

Files for "Build a Process Diagram with Custom SVG Symbols and Editable
Labels" on svgai.org. Made in October 2026. The support team and its
process are fictional.

FILES
support-email-routing.svg: The final diagram. It is a draw.io export
(plain SVG, labels as SVG <text>) with four additions typed in SVG AI's
SVG Code Editor: a <title>, a <desc>, role="img" with aria-labelledby and
aria-describedby on the root element, and aria-hidden="true" on the group
that holds the drawing. The composition and these edits were made by an
AI coding agent.
support-email-routing.drawio: The editable source, as saved by draw.io
32.5.8. Open it in draw.io (app.diagrams.net or the desktop app).
index.html: The diagram on a web page: an image with a short alt text,
followed by the steps as a visible list. It also works opened from disk.
steps-and-labels.txt: The labels in document order, the connectors and
both text alternatives.
icons/: The three SVG AI icons in the diagram, unchanged: an envelope, a
gear and a bell, generated on September 5, 2026 (Classic, one SVG each,
transparent background). Their prompts are in the text-to-SVG tutorial:
https://www.svgai.org/blog/text-to-svg/text-to-svg-ai-tutorial
check-results.json: What was checked, and the results.

TO CHANGE A LABEL
Edit it in the .drawio file. A label you add in draw.io starts as
formatted text: select it, and in Format panel > Text > Advanced turn off
Formatted Text, then Word Wrap (if a box already shows unchecked, tick
it and untick it again). Keep each label inside its card: plain-text labels
don't wrap, so add a line break or widen the card. Then use File > Export
as > SVG with "Include a copy of my diagram" off and, under Advanced,
Appearance set to Light; the export should contain no <foreignObject>.
A new export doesn't have the title, desc and ARIA attributes, so add
them again (see steps-and-labels.txt), and update the visible list on
your page.

TESTED
Chrome 155 and Edge 155 on Windows: element counts and label
order, connector ends, contrast, image and inline rendering, label size
at page widths from 320 to 1280 px, label fit with Verdana and Georgia,
and the accessibility trees in DevTools and in Windows UI Automation
(not a screen reader).
draw.io 32.5.8 in Chrome, driven by scripts: the Text > Advanced steps
and the Waypoints menu on a test diagram built from sidebar shapes and
an imported icon file, with mouse and keyboard events; the exports
through its Export as SVG dialog; the file opening and the label changes
of the editing round trip through draw.io's own functions.
Not tested: screen readers, Safari, Firefox, real phones, other diagram
editors and printing.
