31:T610,md` ### Features * belong to specific field of study * carry a lot of small details for specialists * require specific tools to maintain ### Examples * https://en.wikipedia.org/wiki/Feynman_diagram * https://en.wikipedia.org/wiki/Structural_formula * https://en.wikipedia.org/wiki/Frequency_response * https://en.wikipedia.org/wiki/Smith_chart * https://en.wikipedia.org/wiki/Mind_map * https://en.wikipedia.org/wiki/Euler_diagram * https://en.wikipedia.org/wiki/Venn_diagram * https://en.wikipedia.org/wiki/Petri_net * https://en.wikipedia.org/wiki/State_diagram * https://en.wikipedia.org/wiki/Gantt_chart * https://en.wikipedia.org/wiki/Coxeter%E2%80%93Dynkin_diagram * https://en.wikipedia.org/wiki/Bond_graph * https://en.wikipedia.org/wiki/Data-flow_diagram * https://en.wikipedia.org/wiki/Flowchart * https://en.wikipedia.org/wiki/Functional_flow_block_diagram * https://en.wikipedia.org/wiki/One-line_diagram * https://en.wikipedia.org/wiki/Transit_map * https://en.wikipedia.org/wiki/Signal-flow_graph * https://en.wikipedia.org/wiki/Ishikawa_diagram * https://en.wikipedia.org/wiki/Voronoi_diagram * https://en.wikipedia.org/wiki/Technical_drawing * https://en.wikipedia.org/wiki/Engineering_drawing * https://en.wikipedia.org/wiki/Technical_lettering * https://en.wikipedia.org/wiki/Engineering_drawing#Line_styles_and_types * https://en.wikipedia.org/wiki/CAD_standards * https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model * https://en.wikipedia.org/wiki/Syntax_diagram * https://en.wikipedia.org/wiki/Penguin_diagram `32:T502,md` # Diagrams and system visualisation in chip design ## Abstract Chip designers use multiple forms of illustrations to present information of technical nature quickly and clearly. Illustrations employed to mobilize human visual system ability to recognize trends, patterns and differences. Some forms of illustrations are universally accepted. Data tables, plots, line charts, mechanical drawings can be used to communicate information to the general public. Specialized diagram types (like UML) can be reused from software or system design practice. Such diagrams are capable of describing complex structure or behavior and convey this information to the broad science and engineering community. Like any other specific field of science / engineering -- chip designers developed own specialized visual language to communicate complex ideas with clarity, precision and efficiency. Schematic symbols; timing, circuit, layout diagrams were originally developed for paper medium, now migrated into electronic documentation. Many design tools exists to create illustrations and diagrams. From generic to specialized. Some require freehand drawing skills, some perform automatic layout. This talk is about ideas, principles and tools that would help you to create good diagrams. `33:Tad3,pitch = { // Current collection of transitions and classes, current slide var transition = "", extra="", curslide = -1, parent=undefined, timer=undefined, autonext=0, speak=''; // String template (or html element). Calls through to Markdown. var pitch = function(a,...r) { const div = Object.assign(html`

`,{className:'slide '+extra,transition,extra,autonext,speak}); div.appendChild(a instanceof Array?md.apply(this, arguments):a); speak=transition=extra=""; autonext=0; div._parent = parent; parent=undefined; var container = (this instanceof HTMLElement)?this:Object.assign(html`

`,{position:'relative',className:'_slide',onclick:()=>pitch.present(++curslide)}); while(container.firstChild) container.removeChild(container.firstChild); container.appendChild(div); container._div = div; return container; }; // Some convenience markdown wrappers, and a borderless mode. pitch.img = function(a,...r){extra='img'; return pitch.apply(this,[Object.assign(new Image(),{src:a})]);} pitch.js = function(a,...r){extra='code'; return pitch.apply(this,[["```javasript\n",...a,"\n```"],"",...r,""]);} pitch.code = function(a,...r){extra='code'; return pitch.apply(this,[["```\n",...a,"\n```"],"",...r,""]);} pitch.full = function(){extra='full'; return pitch.apply(this,arguments); }; pitch.inplace = function(x){ parent=x; return pitch; }; pitch.auto = function(x){ autonext=x*1000; return pitch; }; pitch.speak = function(x){ speak=x; return pitch; }; // Chainable effects. ["fade","left","right","blur","sepia"].forEach(x=>pitch.__defineGetter__(x,()=>{transition+=x+" "; return pitch; })); // Shows the requested slide. pitch.present = (x,fast)=>{ if (timer) clearTimeout(timer); var els = [...document.querySelectorAll("._slide")].map(x=>x._div), el = els[x%els.length]; if (!el) return; els.forEach(x=>{if(x._parent && x.parentElement != x._parent) { x._parent.insertBefore(x,x._parent.firstChild); x.style.position="absolute"; x.style.top="0px"; x.style.left="0px"; x.style.zIndex=-10;}}); el.scrollIntoView({block:'start',behavior:fast?'instant':'smooth'}); el.parentElement.scrollLeft=0; [...els].forEach(e=>e.className=(e==el)?'slide '+e.extra:('slide '+e.extra+' '+e.transition)); if (el.autonext) timer = setTimeout(()=>{ pitch.present(++curslide); },el.autonext); if (el.speak) speechSynthesis.speak(Object.assign(new SpeechSynthesisUtterance(el.speak),{lang:'en-US'})); } // Keyboard handler. window.onkeydown = (e)=>{ if (e.keyCode==36) { curslide=0; e.preventDefault(); pitch.present(curslide,true); } if (~[33,34].indexOf(e.keyCode)) { curslide+=2*(e.keyCode-33.5); e.preventDefault(); pitch.present(curslide) } } // CSS styles return pitch; }34:T654,html` `35:[] 2f:{"title":"Diagrams and system visualisation in chip design","cells":[{"id":833,"value":"md`\n# Diagrams and system visualisation in chip design\n\nClick on memu (...) -> Fullscreen -> Click on fisrt slide -> (PageUp / PageDown)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"pitch`\n

\n\n# Diagrams\n\n

and system visualisation in chip design

\n\n

\n Aliaksei Chapyzhenka\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"pitch`\n

\n\nA picture is worth a thousand words\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"md`how many of you heard this before?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"pitch`\n

\n\"And what is the use of a book,\" *thought Alice*, \"without **pictures** or **conversation**?”\n\n\n― Lewis Carroll, Alice's Adventures in Wonderland`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`\n\n## [\"A picture is worth a thousand words\"](https://en.wikipedia.org/wiki/A_picture_is_worth_a_thousand_words)\n\n“And what is the use of a book,\" thought Alice, \"without pictures or conversation?”\n― Lewis Carroll, Alice's Adventures in Wonderland\n\nhttps://www.wired.com/insights/2014/03/turns-picture-worth-thousand-words/\n\nThere is a fundamental difference between looking at a picture and reading.\n\nOur visual system evolved to process images essentially in **parallel**, whereas text, which only appeared a few thousand years ago, requires our visual system to **scan** individual characters, one at a time, recognize them, and piece them together into words, then sentences, and so on (a similar process occurs with ideographic languages).\n\nHowever, just as words cannot really turn into pictures, pictures cannot replace words in terms of their ability to convey clear, (mostly) **unambiguous** information.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"pitch`\n

\nScience & Engineering doodles\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"md`\n\n* many great scientiests where engineers\n* many great engineers where doodlers\n* some doodlers where even an artists\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"pitch``","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"pitch`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"md`\nFor some people / for some ideas visual space is right abstraction for thinking.\n\nVisial space rather then in the space of symbols or text\n\n* Diagrams\n* Symbols, Expressions\n* Diagrams\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"pitch``","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"pitch``","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"pitch`\n

\n\n

What is diagram?

\n**symbolic** representation of
**information** according to
visualization **technique**\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"pitch`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"md`\n## Generic Chart / Plot\n\n### Features\n * usefull in many fields of sciense & engineering.\n * undestandable by broad public.\n * many forms and variations\n * supported by many tools (excel and up)\n\n### Topology\n\n * Map -> Graph\n\n### Examples\n * https://en.wikipedia.org/wiki/Chart\n * https://en.wikipedia.org/wiki/Line_chart\n * https://en.wikipedia.org/wiki/Histogram\n * https://en.wikipedia.org/wiki/Treemapping\n\n### Topology\n * https://en.wikipedia.org/wiki/Block_diagram\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"pitch`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"pitch`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"md`\n\n## Visual languages\n\n * Interaction\n * Structure\n * Behavior\n\n### Examples\n\n * https://en.wikipedia.org/wiki/Unified_Modeling_Language\n * https://en.wikipedia.org/wiki/DRAKON\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"pitch`\n

\n\n\n\n\n\n\n\n\n

\n
\n
simple\n
diagrammatic\n
schematic\n
symbolic\n
\n

\n![](https://i.imgur.com/NSD1A9t.jpg)\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"md`\n### Intuitive vs. Systematic understanding.\n\nDesigners read diagram without full understanding of symbols and language.\n\nSequence diagram with tilted arrows.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"pitch`\n

\n\nDatasheet, Specification, Manual\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"pitch`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"pitch`\n\n`\n// memory map","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"pitch`\n\n`\n// Register\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"pitch`\n

\n${wd({signal: [\n {name: 'clock', wave: 'p...|...|...|...|...'},\n {name: 'a\\_ready', wave: '01..|...|...|...|...'},\n {name: 'a\\_valid', wave: '010.|10.|10.|10.|10.'},\n {name: 'a\\_address',wave: 'x2x.|3x.|2x.|5x.|3x.', data: ['0x0','0x0','0x0','0x0','0x0']},\n {name: 'a\\_opcode', wave: 'x2x.|3x.|2x.|5x.|3x.', data: ['0','4','0','1','4']},\n {name: 'a\\_mask', wave: 'x2x.|3x.|2x.|5x.|3x.', data: ['0xf','0xf','0xf','0x3','0xf']},\n {name: 'a\\_data', wave: 'x2x.|x..|2x.|5x.|x..', data: ['0xab', '0x0','0xf']},\n {name: 'd\\_ready', wave: '01..|...|...|.......'},\n {name: 'd\\_valid', wave: '0.10|.10|.10|.10|.10'},\n {name: 'd\\_opcode', wave: 'x.2x|.3x|.2x|.5x|.3x', data: ['0','1','0','0','1']},\n {name: 'd\\_data', wave: 'x..x|.3x|...|...|.3x', data: ['0xab','0x3']},\n ]\n})}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"pitch`\n\n`\n// TLB","pinned":false,"hidden":false,"mode":"ojs"},{"id":1185,"value":"pitch`\n\n`\n// TLB","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"pitch`\n\n`\n// Machine layout","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"md` back when processors where furniture Cray-1, pdp-1,...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"pitch`\n\n`\n// Package","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"md`\n\n* https://en.wikipedia.org/wiki/Pinout - https://github.com/neuronlight/pinout\n* https://en.wikipedia.org/wiki/Circuit_diagram\n* https://en.wikipedia.org/wiki/Waveform\n* https://en.wikipedia.org/wiki/Digital_timing_diagram\n* https://en.wikipedia.org/wiki/Digital_filter\n* https://en.wikipedia.org/wiki/Integrated_circuit_layout\n* https://en.wikipedia.org/wiki/Activity_diagram\n* https://en.wikipedia.org/wiki/Bit_field\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"pitch`\n

\n\n## What to use?\n\n* Tables are OK in simple cases\n* Generic diagrams\n* Adjacent domain specific diagrams\n* Domain specific\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"pitch`\n

\n\n## Diagramming tools\n\n * Freehand drawing tool (Inkscape)\n * Templated drawing (Visio, Lucidchart)\n * Spreadsheet plots\n * CAD\n * Generate from description..\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":"pitch`\n

\n\n## Generated Diagrams\n\n * Latex -> tikz\n * GraphViz\n * PlantUML\n * HTML.SVG.JS\n * D3\n * WaveDrom\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"pitch`\n

\n\n## Executable?\n\n* Just picture\n* executable spec --> diagram\n* diagram --> spec\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"pitch`\n

\n\n## GraphViz\n\n\\`\\`\\`\ndigraph g {\n a -> b -> c -> d;\n d -> b [label=\"?\"];\n}\n\\`\\`\\`\n\n${dot`digraph g {\n rankdir=\"LR\"\n a -> b -> c -> d;\n d -> b [label=\"?\"];\n}`}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"pitch`\n

\n\n## PlantUML\n\n\\`\\`\\`\n@startuml\nBob -[#red]> Alice : hello\nAlice -[#0000FF]->Bob : ok\n@enduml \"Bob()\" : ok\n@enduml\n\\`\\`\\`\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"pitch`\n

\n\n## Source Language\n\n * Custom (GraphViz, PlantUML)\n * Standard (XML, JSON)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"pitch`\n

\n\n## WaveDrom\n\n\\`\\`\\`js\n{signal:[\n {name: 'clk', wave: 'p.....|...'},\n {name: 'Data', wave: 'x.345x|=.x', data: 'head body tail data'},\n {name: 'Req', wave: '0.1..0|1.0'},\n {},\n {name: 'Ack', wave: '1.....|01.'}\n]}\n\\`\\`\\`\n\n![signal step4](https://svg.wavedrom.com/github/wavedrom/wavedrom/master/test/signal-step4.json5)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1148,"value":"pitch`\n

\n\n\\`\\`\\`js\n{reg:[\n {bits: 7, name: 0x07, attr: ['VLxU,VLE zero-extended', 'VLxU,VLE zero-extended, fault-only-first', 'VLxU sign-extended', 'VLxU sign-extended, fault-only-first']},\n {bits: 5, name: 'vd', attr: 'destination of load', type: 2},\n {bits: 3, name: 'width'},\n {bits: 5, name: 'rs1', attr: 'base address', type: 4},\n {bits: 5, name: 'lumop', attr: [0, 16, 0, 16]},\n {bits: 1, name: 'vm'},\n {bits: 3, name: 'mop', attr: [0, 0, 4, 4]},\n {bits: 3, name: 'nf'},\n]}\n\\`\\`\\`\n\n![signal step4](https://svg.wavedrom.com/github/wavedrom/wavedrom/master/test/reg-vl.json5)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":755,"value":"pitch`\n

\n\n## Style\n\n* Consistant with document\n - font, lines, colors\n* Grid\n* Responsive\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"md`\nhttps://www.edwardtufte.com/tufte/\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"pitch`\n

\n\n## Medium\n\n * HTML/JS/CSS + sys admin\n * CLI tool\n * Github + MD\n * https://ObservableHQ.com\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"pitch`\n

\n\n## Q&A\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`\n\n## Backup\n\nSpecial font for engineers, \n\nCache config diagram from PowerPC 750\n\nSignal groups from PowerPC 750 p.7-3\n\n\n\n\n\nLatex\n\nhttps://observablehq.com/\n\nhttp://fritzing.org/home/\n\nhttps://www.mathcha.io/editor/vwPs1KFnvu2vIy2\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"wavedrom = require('wavedrom@2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"wd = (() => {\n let i = 0;\n return obj => html`${wavedrom.onml.stringify(wavedrom.renderAny(i++, obj, wavedrom.waveSkin))}`\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"dot = require(\"@observablehq/graphviz@0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"md`Style ↴`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}

and system visualisation in chip design

What is diagram?

\n\nsimple\ndiagrammatic\nschematic\nsymbolic\n\n

\n
\n
simple\n
diagrammatic\n
schematic\n
symbolic\n
\n