8008
Intel 8008, from a Mermaid flowchart LR with one subgraph. What maps to what: subgraph becomes a <contains>, and flowchart LR becomes layout="graph" direction="lr" ON that contains, so the boundary and the layout are one element rather than two. Each Mermaid link becomes one <connect>; a double-headed one becomes <connect arrow="both">, which is a single edge with a head at each end, not two edges. (The Mermaid cannot be quoted here verbatim: its double-headed arrow ends an XML comment.) Nothing here says where any on-chip unit goes. The <contains> that draws the 8008 boundary IS the graph (layout="graph" direction="lr", which also takes Mermaid's own direction codes), and the layered layout works the seven units out from the seven internal edges alone. memory and ports sit outside it and the five crossing edges are drawn without moving anything, since only a graph's own internal edges shape it. Two things the picture depends on. moves="false" on the registers/ALU link. It is a bidirectional bus, not a step in a flow, so it should not push the ALU a layer downstream of the register file. Declaring it a relation rather than a step puts control's three targets on one layer and turns the bus into the short vertical double arrow it really is. The edge still draws, with both heads; it just stops deciding the layering. Without it: two crossings. arrow="both" is Mermaid's double-headed arrow. arrow says which ENDS bear a head; head/tail say which SHAPE it is. So tail="arrow" sets the shape of an end that by default is not drawn. It compiles, and does nothing.
Result
Source examples/8008.svgn
<diagram padding="30" theme="light" background="#ffffff">
<!-- Intel 8008, from a Mermaid `flowchart LR` with one subgraph.
What maps to what: `subgraph` becomes a <contains>, and `flowchart LR`
becomes layout="graph" direction="lr" ON that contains, so the boundary
and the layout are one element rather than two. Each Mermaid link becomes
one <connect>; a double-headed one becomes <connect arrow="both">, which
is a single edge with a head at each end, not two edges. (The Mermaid
cannot be quoted here verbatim: its double-headed arrow ends an XML
comment.)
Nothing here says where any on-chip unit goes. The <contains> that draws
the 8008 boundary IS the graph (layout="graph" direction="lr", which also
takes Mermaid's own direction codes), and the layered layout works the
seven units out from the seven internal edges alone. memory and ports sit
outside it and the five crossing edges are drawn without moving anything,
since only a graph's own internal edges shape it.
Two things the picture depends on.
moves="false" on the registers/ALU link. It is a bidirectional bus, not a
step in a flow, so it should not push the ALU a layer downstream of the
register file. Declaring it a relation rather than a step puts control's
three targets on one layer and turns the bus into the short vertical
double arrow it really is. The edge still draws, with both heads; it just
stops deciding the layering. Without it: two crossings.
arrow="both" is Mermaid's double-headed arrow. `arrow` says which ENDS
bear a head; `head`/`tail` say which SHAPE it is. So tail="arrow" sets the
shape of an end that by default is not drawn. It compiles, and does
nothing. -->
<style>
.sv-node { fill: #e9eef6; stroke: #5b6b80; stroke-width: 1.1; }
.sv-panel { fill: #fafbfd; stroke: #8b9aad; stroke-width: 1.1; }
.sv-edge { stroke: #3f4a57; }
.ext { fill: #f2efe9; stroke: #8a8073; }
</style>
<row gap="80" align="center">
<contains id="cpu" label="8008" layout="graph" direction="lr"
gap="52" row-gap="60" padding="20">
<rect id="addresses" width="150" height="76">Eight 14-bit address registers</rect>
<rect id="registers" width="150" height="76">A B C D E H L</rect>
<rect id="alu" width="150" height="76">8-bit arithmetic and logic</rect>
<rect id="hl" width="150" height="76">H:L data address</rect>
<rect id="pc" width="150" height="76">Selected PC</rect>
<rect id="flags" width="150" height="76">S Z P C flags</rect>
<rect id="control" width="150" height="76">Instruction decoding and control</rect>
</contains>
<column gap="70" align="center">
<rect id="memory" class="ext" width="150" height="76">External memory: code and data</rect>
<rect id="ports" class="ext" width="150" height="76">External input and output ports</rect>
</column>
</row>
<!-- inside the 8008 -->
<connect from="registers" to="alu" arrow="both" moves="false"/>
<connect from="alu" to="flags"/>
<connect from="registers" to="hl"/>
<connect from="addresses" to="pc"/>
<connect from="control" to="registers"/>
<connect from="control" to="addresses"/>
<connect from="control" to="alu"/>
<!-- across the boundary -->
<connect from="pc" to="memory"/>
<connect from="hl" to="memory"/>
<connect from="memory" to="control"/>
<connect from="memory" to="registers" arrow="both"/>
<connect from="registers" to="ports" arrow="both"/>
</diagram>