microsoft/qdk
Publicmirrored fromhttps://github.com/microsoft/qdkAvailable
samples/qre/overview.svg
107lines · modecode
| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 920 380" font-family="Segoe UI, Arial, sans-serif" font-size="13"> |
| 2 | <defs> |
| 3 | <marker id="arrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"> |
| 4 | <path d="M0,0 L8,3 L0,6 Z" fill="#555"/> |
| 5 | </marker> |
| 6 | <linearGradient id="appGrad" x1="0" y1="0" x2="0" y2="1"> |
| 7 | <stop offset="0%" stop-color="#e3f2fd"/> |
| 8 | <stop offset="100%" stop-color="#bbdefb"/> |
| 9 | </linearGradient> |
| 10 | <linearGradient id="archGrad" x1="0" y1="0" x2="0" y2="1"> |
| 11 | <stop offset="0%" stop-color="#fce4ec"/> |
| 12 | <stop offset="100%" stop-color="#f8bbd0"/> |
| 13 | </linearGradient> |
| 14 | <linearGradient id="trGrad" x1="0" y1="0" x2="0" y2="1"> |
| 15 | <stop offset="0%" stop-color="#e8f5e9"/> |
| 16 | <stop offset="100%" stop-color="#c8e6c9"/> |
| 17 | </linearGradient> |
| 18 | <linearGradient id="isaGrad" x1="0" y1="0" x2="0" y2="1"> |
| 19 | <stop offset="0%" stop-color="#fff3e0"/> |
| 20 | <stop offset="100%" stop-color="#ffe0b2"/> |
| 21 | </linearGradient> |
| 22 | <linearGradient id="engGrad" x1="0" y1="0" x2="0" y2="1"> |
| 23 | <stop offset="0%" stop-color="#ede7f6"/> |
| 24 | <stop offset="100%" stop-color="#d1c4e9"/> |
| 25 | </linearGradient> |
| 26 | <linearGradient id="resGrad" x1="0" y1="0" x2="0" y2="1"> |
| 27 | <stop offset="0%" stop-color="#f3e5f5"/> |
| 28 | <stop offset="100%" stop-color="#e1bee7"/> |
| 29 | </linearGradient> |
| 30 | </defs> |
| 31 | |
| 32 | <!-- Application box --> |
| 33 | <rect x="20" y="40" width="160" height="100" rx="10" fill="url(#appGrad)" stroke="#1565c0" stroke-width="1.5"/> |
| 34 | <text x="100" y="82" text-anchor="middle" font-weight="bold" fill="#1565c0" font-size="14">Application</text> |
| 35 | <text x="100" y="104" text-anchor="middle" fill="#666" font-size="10" font-style="italic">→ generates traces</text> |
| 36 | |
| 37 | <!-- Architecture box --> |
| 38 | <rect x="20" y="260" width="160" height="100" rx="10" fill="url(#archGrad)" stroke="#c62828" stroke-width="1.5"/> |
| 39 | <text x="100" y="302" text-anchor="middle" font-weight="bold" fill="#c62828" font-size="14">Architecture</text> |
| 40 | <text x="100" y="324" text-anchor="middle" fill="#666" font-size="10" font-style="italic">→ provides physical ISA</text> |
| 41 | |
| 42 | <!-- Arrow: Application → Trace Transforms --> |
| 43 | <line x1="180" y1="90" x2="230" y2="90" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/> |
| 44 | |
| 45 | <!-- Trace Transforms box --> |
| 46 | <rect x="235" y="40" width="190" height="100" rx="10" fill="url(#trGrad)" stroke="#2e7d32" stroke-width="1.5"/> |
| 47 | <text x="330" y="82" text-anchor="middle" font-weight="bold" fill="#2e7d32" font-size="14">Trace Transforms</text> |
| 48 | <text x="330" y="104" text-anchor="middle" fill="#666" font-size="10" font-style="italic">→ multiple trace variants</text> |
| 49 | |
| 50 | <!-- Arrow: Architecture → ISA Transforms --> |
| 51 | <line x1="180" y1="310" x2="230" y2="310" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/> |
| 52 | |
| 53 | <!-- ISA Transforms box --> |
| 54 | <rect x="235" y="260" width="190" height="100" rx="10" fill="url(#isaGrad)" stroke="#e65100" stroke-width="1.5"/> |
| 55 | <text x="330" y="302" text-anchor="middle" font-weight="bold" fill="#e65100" font-size="14">ISA Transforms</text> |
| 56 | <text x="330" y="324" text-anchor="middle" fill="#666" font-size="10" font-style="italic">→ multiple ISA variants</text> |
| 57 | |
| 58 | <!-- Arrow: Trace Transforms → Engine --> |
| 59 | <line x1="425" y1="90" x2="495" y2="170" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/> |
| 60 | |
| 61 | <!-- Arrow: ISA Transforms → Engine --> |
| 62 | <line x1="425" y1="310" x2="495" y2="230" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/> |
| 63 | |
| 64 | <!-- Design Space Exploration engine --> |
| 65 | <rect x="500" y="140" width="210" height="120" rx="12" fill="url(#engGrad)" stroke="#4527a0" stroke-width="2"/> |
| 66 | <text x="605" y="172" text-anchor="middle" font-weight="bold" fill="#4527a0" font-size="14">Design Space</text> |
| 67 | <text x="605" y="190" text-anchor="middle" font-weight="bold" fill="#4527a0" font-size="14">Exploration</text> |
| 68 | <text x="605" y="215" text-anchor="middle" fill="#333" font-size="11">Evaluate all trace × ISA</text> |
| 69 | <text x="605" y="231" text-anchor="middle" fill="#333" font-size="11">combinations, filter by</text> |
| 70 | <text x="605" y="247" text-anchor="middle" fill="#333" font-size="11">error budget</text> |
| 71 | |
| 72 | <!-- Arrow: Engine → Results --> |
| 73 | <line x1="710" y1="200" x2="745" y2="200" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/> |
| 74 | |
| 75 | <!-- Results / Pareto frontier box --> |
| 76 | <rect x="750" y="120" width="150" height="170" rx="10" fill="url(#resGrad)" stroke="#6a1b9a" stroke-width="1.5"/> |
| 77 | <text x="825" y="148" text-anchor="middle" font-weight="bold" fill="#6a1b9a" font-size="14">Pareto Frontier</text> |
| 78 | |
| 79 | <!-- Mini scatter plot inside results box --> |
| 80 | <!-- Axes --> |
| 81 | <line x1="772" y1="253" x2="772" y2="160" stroke="#666" stroke-width="1"/> |
| 82 | <line x1="772" y1="253" x2="878" y2="253" stroke="#666" stroke-width="1"/> |
| 83 | <text x="825" y="265" text-anchor="middle" fill="#666" font-size="9">Runtime →</text> |
| 84 | <text x="762" y="210" text-anchor="middle" fill="#666" font-size="9" transform="rotate(-90,762,210)">Qubits →</text> |
| 85 | |
| 86 | <!-- Dominated points (gray, each above-right of at least one Pareto point) --> |
| 87 | <circle cx="815" cy="182" r="4" fill="#bbb" opacity="0.6"/> |
| 88 | <circle cx="828" cy="192" r="4" fill="#bbb" opacity="0.6"/> |
| 89 | <circle cx="848" cy="210" r="4" fill="#bbb" opacity="0.6"/> |
| 90 | <circle cx="858" cy="225" r="4" fill="#bbb" opacity="0.6"/> |
| 91 | <circle cx="870" cy="236" r="4" fill="#bbb" opacity="0.6"/> |
| 92 | |
| 93 | <!-- Pareto-optimal points (purple, top-left to bottom-right: many qubits/fast → few qubits/slow) --> |
| 94 | <circle cx="790" cy="175" r="5" fill="#6a1b9a"/> |
| 95 | <circle cx="810" cy="205" r="5" fill="#6a1b9a"/> |
| 96 | <circle cx="840" cy="232" r="5" fill="#6a1b9a"/> |
| 97 | <circle cx="865" cy="245" r="5" fill="#6a1b9a"/> |
| 98 | |
| 99 | <!-- Pareto line --> |
| 100 | <polyline points="790,175 810,205 840,232 865,245" fill="none" stroke="#6a1b9a" stroke-width="1.5" stroke-dasharray="4,3"/> |
| 101 | |
| 102 | <!-- Legend inside box --> |
| 103 | <circle cx="770" cy="275" r="3.5" fill="#6a1b9a"/> |
| 104 | <text x="778" y="278" fill="#333" font-size="9">Pareto-optimal</text> |
| 105 | <circle cx="845" cy="275" r="3.5" fill="#bbb" opacity="0.6"/> |
| 106 | <text x="853" y="278" fill="#333" font-size="9">Dominated</text> |
| 107 | </svg> |
| 108 | |