# `Expresso.Element.Diagram.Outline`
[🔗](https://github.com/rellen/expresso/blob/main/lib/expresso/element/diagram/outline.ex#L1)

The list of a graph for a screen reader

A screen reader reads the text of an SVG in the order of the file, and that
order is not the order of the graph. Therefore the render writes a nested
list of the graph next to the SVG, and the style sheet hides the list from
the eye, as it hides the list of a `tree`. The list holds each container
with its nodes, and each node with the edges that leave it, such as "web,
to api".

The tools mark each element of the graph for this module:

| Attribute | Value |
| --- | --- |
| `data-graph-kind` | `node`, `container` or `edge` |
| `data-graph-parent` | The `id` of the container of a node or of a container |
| `data-graph-from`, `data-graph-to` | The ends of an edge |
| `data-graph-arrow` | The arrow of an edge: `->`, `<-`, `<->` or `--` |
| `data-graph-label` | The label of an edge, when the label is not inside the group of the edge |

The label of an element is the text that it shows, or its name when it
shows no text.

# `item`

```elixir
@type item() :: %{label: String.t(), edges: [String.t()], children: [item()]}
```

An item of the list: its label, the edges that leave it, and its children

# `items`

```elixir
@spec items(String.t()) :: [item()]
```

Return the items of the list of a graph, from its SVG

The items are in the order of the file. An SVG without a marked element
returns an empty list.

---

*Consult [api-reference.md](api-reference.md) for complete listing*