<svg viewBox="0 0 900 700" xmlns="http://www.w3.org/2000/svg">
<!-- Background rectangle: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect
Using fill attribute to set background color -->
<rect width="900" height="700" fill="#f5f5f5"/>
<!-- Definitions for reusable elements: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs -->
<defs>
<!-- Filter effect for drop shadow: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter
Combines blur, offset and opacity adjustments -->
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<!-- Gaussian blur: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur -->
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<!-- Offset for shadow: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feOffset -->
<feOffset dx="1" dy="1"/>
<!-- Adjust shadow opacity: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer -->
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"/>
</feComponentTransfer>
<!-- Merge shadow with original: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feMerge -->
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Title text: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
text-anchor="middle" centers text horizontally around x coordinate -->
<text x="450" y="50" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2d3e50">
Mermaid vs Graphviz Feature Comparison
</text>
<!-- Circle Labels: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text -->
<text x="350" y="120" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#2d3e50">Mermaid</text>
<text x="550" y="120" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#2d3e50">Graphviz</text>
<!-- Venn Diagram Circles: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
fill="none" makes circles transparent, only showing stroke (border) -->
<circle cx="350" cy="380" r="220" fill="none" stroke="#333" stroke-width="2" filter="url(#shadow)"/>
<circle cx="550" cy="380" r="220" fill="none" stroke="#333" stroke-width="2" filter="url(#shadow)"/>
<!-- Feature Lists: Using text element with tspan for multi-line text
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan -->
<!-- Mermaid-specific features - left aligned with text-anchor="start" -->
<text x="160" y="300" text-anchor="start" font-family="Arial, sans-serif" font-size="14" fill="#4a6785">
<!-- dy attribute creates vertical offset from previous line -->
<tspan x="160" dy="0">Git flows</tspan>
<tspan x="160" dy="25">Sequence diagrams</tspan>
<tspan x="160" dy="25">User journeys</tspan>
<tspan x="160" dy="25">Timeline charts</tspan>
<tspan x="160" dy="25">Requirements diagrams</tspan>
<tspan x="160" dy="25">Quick prototyping</tspan>
</text>
<!-- Shared features - centered with text-anchor="middle" -->
<text x="450" y="350" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#2d5e1e" font-weight="bold">
<tspan x="450" dy="-30">Flowcharts</tspan>
<tspan x="450" dy="25">State diagrams</tspan>
<tspan x="450" dy="25">ERD diagrams</tspan>
<tspan x="450" dy="25">Class diagrams</tspan>
<tspan x="450" dy="25">Basic directed graphs</tspan>
</text>
<!-- Graphviz-specific features - left aligned -->
<text x="600" y="300" text-anchor="start" font-family="Arial, sans-serif" font-size="14" fill="#8b2635">
<tspan x="600" dy="0">Complex layouts</tspan>
<tspan x="600" dy="25">Fine-grained control</tspan>
<tspan x="600" dy="25">Advanced edge routing</tspan>
<tspan x="600" dy="25">Subgraph clustering</tspan>
<tspan x="600" dy="25">Mathematical graphs</tspan>
<tspan x="600" dy="25">Advanced node shapes</tspan>
</text>
</svg>
