# Diagram Library --- # Home 📝 This site showcases examples of diagram languages and libraries you can use to create diagrams, making it a useful reference for exploring different options and diagram types. Welcome to the Capable Diagram reference site, a collection of practical examples across different diagram languages and libraries. Use it to compare syntax, explore common diagram types, and find reusable starting points for creating your own flowcharts, sequence diagrams, architecture views, state machines, and more. --- [BlockDiag](https://diagrams.gocapable.com/diagrams/blockdiag.html)[BPMN](https://diagrams.gocapable.com/diagrams/bpmn.html)[Diagrams.net (Draw.io)](https://diagrams.gocapable.com/diagrams/diagrams-net-draw-io.html)[Bytefield](https://diagrams.gocapable.com/diagrams/bytefield.html)[C4](https://diagrams.gocapable.com/diagrams/c4.html)[D2](https://diagrams.gocapable.com/diagrams/d2.html)[DBML](https://diagrams.gocapable.com/diagrams/dbml.html)[DITAA](https://diagrams.gocapable.com/diagrams/ditaa.html)[DMN](https://diagrams.gocapable.com/diagrams/dmn.html)[ERD](https://diagrams.gocapable.com/diagrams/erd.html)[Excalidraw](https://diagrams.gocapable.com/diagrams/excalidraw.html)[GraphViz](https://diagrams.gocapable.com/diagrams/graphviz.html)[Mermaid](https://diagrams.gocapable.com/diagrams/mermaid.html)[Nomnomml](https://diagrams.gocapable.com/diagrams/nomnomml.html)[Pikchr](https://diagrams.gocapable.com/diagrams/pikchr.html)[PlantUML](https://diagrams.gocapable.com/diagrams/plantuml.html)[Structurizr](https://diagrams.gocapable.com/diagrams/structurizr.html)[SVGbob](https://diagrams.gocapable.com/diagrams/svgbob.html)[Symbolator](https://diagrams.gocapable.com/diagrams/symbolator.html)[TikZ](https://diagrams.gocapable.com/diagrams/tikz.html)[Vega](https://diagrams.gocapable.com/diagrams/vega.html)[Vega-Lite](https://diagrams.gocapable.com/diagrams/vega-lite.html)[WaveDrom](https://diagrams.gocapable.com/diagrams/wavedrom.html)[WireViz](https://diagrams.gocapable.com/diagrams/wireviz.html) --- # BlockDiag 📝 The BlockDiag family of diagram libraries is a collection of text-to-diagram tools for generating clear, consistent technical diagrams from simple plain-text descriptions. Rather than drawing diagrams manually, users define structures such as block diagrams, sequence diagrams, activity flows, network diagrams and other visual models in a lightweight syntax, which the libraries then render automatically. This makes BlockDiag especially useful for documentation, architecture notes and version-controlled projects, where diagrams need to be easy to update, review and keep in sync with the surrounding content. --- [Activity Diagram (BlockDiag)](https://diagrams.gocapable.com/diagrams/activity-diagram-blockdiag.html)[Block Diagram (BlockDiag)](https://diagrams.gocapable.com/diagrams/block-diagram-blockdiag.html)[Flowchart Diagram (BlockDiag)](https://diagrams.gocapable.com/diagrams/flowchart-diagram-blockdiag.html)[Network Diagram (BlockDiag)](https://diagrams.gocapable.com/diagrams/network-diagram-blockdiag.html)[Packet Diagram (BlockDiag)](https://diagrams.gocapable.com/diagrams/packet-diagram-blockdiag.html)[Rack Diagram (BlockDiag)](https://diagrams.gocapable.com/diagrams/rack-diagram-blockdiag.html)[Sequence Diagram (BlockDiag)](https://diagrams.gocapable.com/diagrams/sequence-diagram-blockdiag.html) --- # Activity Diagram (BlockDiag) ActDiag (part of Blockdiag) lets you describe a process or workflow as text, and then automatically renders it as an **activity diagram** (a flow of actions). --- ![Activity Diagram](https://diagrams.gocapable.com/images/att1226309719.svg) ``` actdiag { write -> convert -> image lane user { label = "User" write [label = "Writing text"]; image [label = "Get diagram image"]; } lane Renderer { convert [label = "Convert text to image"]; } } ``` --- # Block Diagram (BlockDiag) In the BlockDiag family, BlockDiag is the core component that creates _block diagrams_ (box-and-arrow diagrams) from plain text. --- ![Block Diagram](https://diagrams.gocapable.com/images/att1226244198.svg) ``` blockdiag { // Set labels to nodes. A [label = "foo"]; B [label = "bar"]; // And set text-color C [label = "baz"]; // Set labels to edges. (short text only) A -> B [label = "click bar", textcolor="red"]; B -> C [label = "click baz"]; C -> A; } ``` --- # Flowchart Diagram (BlockDiag) BlockDiag can be used to create flowchart-style diagrams by leveraging its node shapes, branching edges, and styling options. --- ![Flowchart Diagram](https://diagrams.gocapable.com/images/att1226866801.svg) ``` diagram admin { top_page [label = "Top page"]; foo_index [label = "List of FOOs"]; foo_detail [label = "Detail FOO"]; foo_add [label = "Add FOO"]; foo_add_confirm [label = "Add FOO (confirm)"]; foo_edit [label = "Edit FOO"]; foo_edit_confirm [label = "Edit FOO (confirm)"]; foo_delete_confirm [label = "Delete FOO (confirm)"]; bar_detail [label = "Detail of BAR"]; bar_edit [label = "Edit BAR"]; bar_edit_confirm [label = "Edit BAR (confirm)"]; logout; top_page -> foo_index; top_page -> bar_detail; foo_index -> foo_detail; foo_detail -> foo_edit; foo_detail -> foo_delete_confirm; foo_index -> foo_add -> foo_add_confirm -> foo_index; foo_index -> foo_edit -> foo_edit_confirm -> foo_index; foo_index -> foo_delete_confirm -> foo_index; bar_detail -> bar_edit -> bar_edit_confirm -> bar_detail; } ``` --- # Network Diagram (BlockDiag) NwDiag (part of Blockdiag) lets you describe network topologies as text, and automatically renders them as network infrastructure diagrams. --- ![Network Diagram](https://diagrams.gocapable.com/images/att1226244206.svg) ``` nwdiag { network dmz { address = "210.x.x.x/24" web01 [address = "210.x.x.1"]; web02 [address = "210.x.x.2"]; } network internal { address = "172.x.x.x/24"; web01 [address = "172.x.x.1"]; web02 [address = "172.x.x.2"]; db01; db02; } } ``` --- # Packet Diagram (BlockDiag) PacketDiag (part of Blockdiag) lets you describe the internal structure of network packets as text, and automatically renders them as packet header/format diagrams - the kind you'd see in RFCs and networking documentation. --- ![Packet Diagram](https://diagrams.gocapable.com/images/att1226342540.svg) ``` packetdiag { colwidth = 32; node_height = 72; 0-15: Source Port; 16-31: Destination Port; 32-63: Sequence Number; 64-95: Acknowledgment Number; 96-99: Data Offset; 100-105: Reserved; 106: URG [rotate = 270]; 107: ACK [rotate = 270]; 108: PSH [rotate = 270]; 109: RST [rotate = 270]; 110: SYN [rotate = 270]; 111: FIN [rotate = 270]; 112-127: Window; 128-143: Checksum; 144-159: Urgent Pointer; 160-191: (Options and Padding); 192-223: data [colheight = 3]; } ``` --- # Rack Diagram (BlockDiag) RackDiag (part of Blockdiag) lets you describe the physical layout of equipment in server racks as text, and automatically renders them as rack elevation diagrams - the kind you'd see in data centre documentation. --- ![Rack Diagram](https://diagrams.gocapable.com/images/att1227227233.svg) ``` rackdiag { 8U; 1: UPS [2U]; 3: DB Server; 4: Web Server; 5: Web Server; 6: Web Server; 7: Load Balancer; 8: L3 Switch; } ``` --- # Sequence Diagram (BlockDiag) SeqDiag (part of Blockdiag) lets you describe interactions between participants over time as text, and automatically renders them as sequence diagrams - the kind used in UML to show message passing between objects or systems. --- ![Sequence Diagram](https://diagrams.gocapable.com/images/att1226408067.svg) ``` seqdiag { browser -> webserver [label = "GET /seqdiag/svg/base64"]; webserver -> processor [label = "Convert text to image"]; webserver <-- processor; browser <-- webserver; } ``` --- # BPMN 📝 BPMN (Business Process Model and Notation) diagramming is a standard way to visually describe how a business process works from start to finish. It uses a consistent set of symbols - such as events, activities, gateways, and flows - to show who does what, when decisions are made, and how information or tasks move between people, teams, and systems. BPMN diagrams are usually used to document, analyse, and improve business processes. They help stakeholders understand current ways of working, identify bottlenecks or handover points, design future-state processes, and provide clear requirements for automation, workflow tools, or system development. Because BPMN is widely recognised, it is especially useful for creating a shared language between business teams, analysts, developers, and process owners. --- [Customer Support Process (BPMN)](https://diagrams.gocapable.com/diagrams/customer-support-process-bpmn.html)[Employee Onboarding Process (BPMN)](https://diagrams.gocapable.com/diagrams/employee-onboarding-process-bpmn.html)[Expense Reimbursement (BPMN)](https://diagrams.gocapable.com/diagrams/expense-reimbursement-bpmn.html)[Purchase Order Approval (BPMN)](https://diagrams.gocapable.com/diagrams/purchase-order-approval-bpmn.html)[Sales Lead Process (BPMN)](https://diagrams.gocapable.com/diagrams/sales-lead-process-bpmn.html) --- # Customer Support Process (BPMN) ![Customer Support Ticket Handling](https://diagrams.gocapable.com/images/att1226309735.svg) ``` Flow_1 Flow_1 Flow_2 Flow_2 Flow_3 Flow_3 Flow_4 Flow_4 Flow_5 Flow_6 Flow_5 Flow_7 Flow_6 Flow_8 Flow_8 Flow_9 Flow_9 Flow_10 Flow_7 Flow_10 ``` --- # Employee Onboarding Process (BPMN) ![Employee Onboarding Process](https://diagrams.gocapable.com/images/att1225752718.svg) ``` Flow_1 Flow_1 Flow_2 Flow_2 Flow_3 Flow_3 Flow_4 Flow_5 Flow_4 Flow_6 Flow_5 Flow_7 Flow_6 Flow_7 Flow_8 Flow_8 Flow_9 Flow_9 Flow_10 Flow_10 ``` --- # Expense Reimbursement (BPMN) ![Expense Reimbursement](https://diagrams.gocapable.com/images/att1227194475.svg) ``` Flow_1 Flow_1 Flow_2 Flow_2 Flow_3 Flow_3 Flow_4 Flow_4 Flow_5 Flow_6 Flow_5 Flow_7 Flow_6 Flow_8 Flow_8 Flow_9 Flow_9 Flow_10 Flow_7 Flow_10 ``` --- # Purchase Order Approval (BPMN) ![Purchase Order Approval](https://diagrams.gocapable.com/images/att1226145903.svg) ``` Flow_1 Flow_1 Flow_2 Flow_3 Flow_2 Flow_4 Flow_4 Flow_5 Flow_5 Flow_6 Flow_6 Flow_7 P3D Flow_7 Flow_3 ``` --- # Sales Lead Process (BPMN) ![Sales Lead Process](https://diagrams.gocapable.com/images/att1226277003.svg) ``` Flow_1 Flow_1 Flow_2 Flow_2 Flow_3 Flow_3 Flow_4 Flow_5 Flow_4 Flow_6 Flow_5 Flow_7 Flow_6 Flow_7 Flow_8 Flow_8 Flow_9 Flow_9 Flow_10 Flow_10 ``` --- # Diagrams.net (Draw.io) [Venn Diagram (Draw.io)](https://diagrams.gocapable.com/diagrams/venn-diagram-draw-io.html)[Process Diagram (Draw.io)](https://diagrams.gocapable.com/diagrams/process-diagram-draw-io.html)[AWS Architecture (Draw.io)](https://diagrams.gocapable.com/diagrams/aws-architecture-draw-io.html)[Sequence Diagram (Draw.io)](https://diagrams.gocapable.com/diagrams/sequence-diagram-draw-io.html)[External Images (Draw.io)](https://diagrams.gocapable.com/diagrams/external-images-draw-io.html) --- # Bytefield 📝 Bytefield is a diagram language for describing binary data layouts, such as packet formats, file headers, registers, and protocol structures. It lets you represent fields as labelled boxes arranged by byte or bit position, making it easier to see how data is packed, aligned, and interpreted. Bytefield diagrams are commonly used in technical documentation, specifications, and engineering notes to explain low-level formats clearly and consistently. --- [Database Header (Bytefield)](https://diagrams.gocapable.com/diagrams/database-header-bytefield.html)[Memory Layout (Bytefield)](https://diagrams.gocapable.com/diagrams/memory-layout-bytefield.html)[Nested Structure (Bytefield)](https://diagrams.gocapable.com/diagrams/nested-structure-bytefield.html)[Protocol Header (Bytefield)](https://diagrams.gocapable.com/diagrams/protocol-header-bytefield.html)[TCP Header (Bytefield)](https://diagrams.gocapable.com/diagrams/tcp-header-bytefield.html) --- # Database Header (Bytefield) ![Database Header](https://diagrams.gocapable.com/images/att1225719911.svg) ``` (defattrs :bg-green {:fill "#a0ffa0"}) (defattrs :bg-yellow {:fill "#ffffa0"}) (defattrs :bg-pink {:fill "#ffb0a0"}) (defattrs :bg-cyan {:fill "#a0fafa"}) (defattrs :bg-purple {:fill "#e4b5f7"}) (defn draw-group-label-header [span label] (draw-box (text label [:math {:font-size 12}]) {:span span :borders #{} :height 14})) (defn draw-remotedb-header [kind args] (draw-column-headers) (draw-group-label-header 5 "start") (draw-group-label-header 5 "TxID") (draw-group-label-header 3 "type") (draw-group-label-header 2 "args") (draw-group-label-header 1 "tags") (next-row 18) (draw-box 0x11 :bg-green) (draw-box 0x872349ae [{:span 4} :bg-green]) (draw-box 0x11 :bg-yellow) (draw-box (text "TxID" :math) [{:span 4} :bg-yellow]) (draw-box 0x10 :bg-pink) (draw-box (hex-text kind 4 :bold) [{:span 2} :bg-pink]) (draw-box 0x0f :bg-cyan) (draw-box (hex-text args 2 :bold) :bg-cyan) (draw-box 0x14 :bg-purple) (draw-box (text "0000000c" :hex [[:plain {:font-weight "light" :font-size 16}] " (12)"]) [{:span 4} :bg-purple]) (draw-box (hex-text 6 2 :bold) [:box-first :bg-purple]) (doseq [val [6 6 3 6 6 6 6 3]] (draw-box (hex-text val 2 :bold) [:box-related :bg-purple])) (doseq [val [0 0]] (draw-box val [:box-related :bg-purple])) (draw-box 0 [:box-last :bg-purple])) (draw-remotedb-header 0x4702 9) (draw-box 0x11) (draw-box 0x2104 {:span 4}) (draw-box 0x11) (draw-box 0 {:span 4}) (draw-box 0x11) (draw-box (text "length" [:math] [:sub 1]) {:span 4}) (draw-box 0x14) (draw-box (text "length" [:math] [:sub 1]) {:span 4}) (draw-gap "Cue and loop point bytes") (draw-box nil :box-below) (draw-box 0x11) (draw-box 0x36 {:span 4}) (draw-box 0x11) (draw-box (text "num" [:math] [:sub "hot"]) {:span 4}) (draw-box 0x11) (draw-box (text "num" [:math] [:sub "cue"]) {:span 4}) (draw-box 0x11) (draw-box (text "length" [:math] [:sub 2]) {:span 4}) (draw-box 0x14) (draw-box (text "length" [:math] [:sub 2]) {:span 4}) (draw-gap "Unknown bytes" {:min-label-columns 6}) (draw-bottom) ``` --- # Memory Layout (Bytefield) ![Memory Layout](https://diagrams.gocapable.com/images/att1226801292.svg) ``` (draw-column-headers) (draw-box "Address" {:span 4}) (draw-box "Size" {:span 2}) (draw-box 0 {:span 2}) (draw-gap "Variable-length data") (draw-box nil :box-below) (draw-box "Next Address" {:span 4}) (draw-box "Block Size" {:span 2}) (draw-gap "Optional extension" {:min-label-columns 6}) (draw-bottom) ``` --- # Nested Structure (Bytefield) ![Nested Structure](https://diagrams.gocapable.com/images/att1225752761.svg) ``` (defattrs :hdr {:fill "#e4b5f7"}) (defattrs :body {:fill "#a0fafa"}) (defn draw-group-label-header [span label] (draw-box (text label [:math {:font-size 12}]) {:span span :borders #{} :height 14})) (draw-column-headers) (draw-group-label-header 4 "Magic") (draw-group-label-header 2 "Version") (draw-group-label-header 2 "Type") (draw-group-label-header 4 "Length") (next-row 14) (draw-box (hex-text 0xFFFFFFFF 4 :bold) [:hdr {:span 4}]) (draw-box (hex-text 1 2 :bold) [:hdr {:span 2}]) (draw-box (hex-text 0x0A 2 :bold) [:hdr {:span 2}]) (draw-box (hex-text 256 4 :bold) [:hdr {:span 4}]) (draw-gap "Payload" {:min-label-columns 4}) (draw-bottom) ``` --- # Protocol Header (Bytefield) ![Simple Protocol Header](https://diagrams.gocapable.com/images/att1225654423.svg) ``` (draw-column-headers) (draw-box "V" {:span 1}) (draw-box "T" {:span 1}) (draw-box "Length" {:span 2}) (draw-related-boxes [0x00 0x01 0x02 0x03 0x04 0x05 0x06 0x07]) (draw-box "Hash" {:span 2}) (draw-gap "Payload") (draw-bottom) ``` --- # TCP Header (Bytefield) ![TCP Header](https://diagrams.gocapable.com/images/att1226834048.svg) ``` (defattrs :src-port {:fill "#a0ffa0"}) (defattrs :dst-port {:fill "#ffffa0"}) (defattrs :seq {:fill "#a0fafa"}) (defattrs :flags {:fill "#ffb0a0"}) (draw-column-headers) (draw-box "Source Port" [:src-port {:span 2}]) (draw-box "Dest Port" [:dst-port {:span 2}]) (draw-box "Sequence" [:seq {:span 4}]) (draw-box "Ack Number" [:seq {:span 4}]) (draw-box "Offset" {:span 1}) (draw-box "Flags" [:flags {:span 1}]) (draw-box "Window" {:span 2}) (draw-box "Checksum" {:span 2}) (draw-box "Urgent" {:span 2}) (draw-bottom) ``` --- # C4 📝 “C4” stands for Context, Containers, Components, Code. C4 diagram modelling is a way of drawing **simple, structured diagrams of software systems** so that different audiences (developers, architects, stakeholders) can all understand the same picture. --- [Component Diagram (C4)](https://diagrams.gocapable.com/diagrams/component-diagram-c4.html)[Container Diagram (C4)](https://diagrams.gocapable.com/diagrams/container-diagram-c4.html)[Context Diagram (C4)](https://diagrams.gocapable.com/diagrams/context-diagram-c4.html) --- # Component Diagram (C4) ![Component Diagram](https://diagrams.gocapable.com/images/att1227063449.svg) ``` @startuml !include C4_Component.puml LAYOUT_WITH_LEGEND() title Component diagram for Internet Banking System - API Application Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.") Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.") ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.") System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") Container_Boundary(api, "API Application") { Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system") Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts") Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.") Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.") Rel(sign, security, "Uses") Rel(accounts, mbsfacade, "Uses") Rel(security, db, "Read & write to", "JDBC") Rel(mbsfacade, mbs, "Uses", "XML/HTTPS") } Rel(spa, sign, "Uses", "JSON/HTTPS") Rel(spa, accounts, "Uses", "JSON/HTTPS") Rel(ma, sign, "Uses", "JSON/HTTPS") Rel(ma, accounts, "Uses", "JSON/HTTPS") @enduml ``` --- # Container Diagram (C4) ![Container Diagram](https://diagrams.gocapable.com/images/att1227161742.svg) --- # Context Diagram (C4) ![Context Diagram](https://diagrams.gocapable.com/images/att1226932360.svg) ``` @startuml !include C4_Context.puml LAYOUT_WITH_LEGEND() title System Context diagram for Internet Banking System Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.") System(banking_system, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.") System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") Rel(customer, banking_system, "Uses") Rel_Back(customer, mail_system, "Sends e-mails to") Rel_Neighbor(banking_system, mail_system, "Sends e-mails", "SMTP") Rel(banking_system, mainframe, "Uses") @enduml ``` --- # D2 **D2** is a modern, open‑source **diagram scripting language**: you write simple, human‑readable text, and it automatically renders that text into a diagram. --- [Architecture Diagram (D2)](https://diagrams.gocapable.com/diagrams/architecture-diagram-d2.html)[Containers & Icons (D2)](https://diagrams.gocapable.com/diagrams/containers-icons-d2.html)[Sequence Diagram (D2)](https://diagrams.gocapable.com/diagrams/sequence-diagram-d2.html)[Shape Variations (D2)](https://diagrams.gocapable.com/diagrams/shape-variations-d2.html)[SQL Schema Diagram (D2)](https://diagrams.gocapable.com/diagrams/sql-schema-diagram-d2.html)[UML Class Diagram (D2)](https://diagrams.gocapable.com/diagrams/uml-class-diagram-d2.html) --- # Architecture Diagram (D2) ![Architecture Diagram](https://diagrams.gocapable.com/images/att1225982123.svg) ``` timeline mixer: "" { explanation: |md ## **Timeline mixer** - Inject ads, who-to-follow, onboarding - Conversation module - Cursoring,pagination - Tweat deduplication - Served data logging | } People discovery: "People discovery \nservice" admixer: Ad mixer { style.fill: "#c1a2f3" } onboarding service: "Onboarding \nservice" timeline mixer -> People discovery timeline mixer -> onboarding service timeline mixer -> admixer container0: "" { graphql comment tlsapi } container0.graphql: GraphQL\nFederated Strato Column { shape: image icon: https://cdn.jsdelivr.net/gh/devicons/devicon/icons/graphql/graphql-plain.svg } container0.comment: |md ## Tweet/user content hydration, visibility filtering | container0.tlsapi: TLS-API (being deprecated) container0.graphql -> timeline mixer timeline mixer <- container0.tlsapi twitter fe: "Twitter Frontend " { icon: https://icons.terrastruct.com/social/013-twitter-1.svg shape: image } twitter fe -> container0.graphql: iPhone web twitter fe -> container0.tlsapi: HTTP Android web: Web { icon: https://icons.terrastruct.com/azure/Web%20Service%20Color/App%20Service%20Domains.svg shape: image } Iphone: { icon: 'https://ss7.vzw.com/is/image/VerizonWireless/apple-iphone-12-64gb-purple-53017-mjn13ll-a?$device-lg$' shape: image } Android: { icon: https://cdn4.iconfinder.com/data/icons/smart-phones-technologies/512/android-phone.png shape: image } web -> twitter fe timeline scorer: "Timeline\nScorer" { style.fill: "#ffdef1" } home ranker: Home Ranker timeline service: Timeline Service timeline mixer -> timeline scorer: Thrift RPC timeline mixer -> home ranker: { style.stroke-dash: 4 style.stroke: "#000E3D" } timeline mixer -> timeline service home mixer: Home mixer { # style.fill: "#c1a2f3" } container0.graphql -> home mixer: { style.stroke-dash: 4 style.stroke: "#000E3D" } home mixer -> timeline scorer home mixer -> home ranker: { style.stroke-dash: 4 style.stroke: "#000E3D" } home mixer -> timeline service manhattan 2: Manhattan gizmoduck: Gizmoduck socialgraph: Social graph tweetypie: Tweety Pie home mixer -> manhattan 2 home mixer -> gizmoduck home mixer -> socialgraph home mixer -> tweetypie Iphone -> twitter fe Android -> twitter fe prediction service2: Prediction Service { shape: image icon: https://cdn-icons-png.flaticon.com/512/6461/6461819.png } home scorer: Home Scorer { style.fill: "#ffdef1" } manhattan: Manhattan memcache: Memcache { icon: https://cdn.jsdelivr.net/gh/devicons/devicon/icons/memcached/memcached-original.svg } fetch: Fetch { style.multiple: true shape: step } feature: Feature { style.multiple: true shape: step } scoring: Scoring { style.multiple: true shape: step } fetch -> feature feature -> scoring prediction service: Prediction Service { shape: image icon: https://cdn-icons-png.flaticon.com/512/6461/6461819.png } scoring -> prediction service fetch -> container2.crmixer home scorer -> manhattan: "" home scorer -> memcache: "" home scorer -> prediction service2 home ranker -> home scorer home ranker -> container2.crmixer: Candidate Fetch container2: "" { style.stroke: "#000E3D" style.fill: "#ffffff" crmixer: CrMixer { style.fill: "#F7F8FE" } earlybird: EarlyBird utag: Utag space: Space communities: Communities } etc: ...etc home scorer -> etc: Feature Hydration feature -> manhattan feature -> memcache feature -> etc: Candidate sources ``` --- # Containers & Icons (D2) ![Containers & Icons](https://diagrams.gocapable.com/images/att1225883800.svg) ``` services: "" { api: API Server { icon: https://icons.terrastruct.com/aws/Compute/Amazon-EC2.svg shape: image } db: Database { icon: https://icons.terrastruct.com/aws/Database/Amazon-RDS.svg shape: image } cache: Cache { icon: https://icons.terrastruct.com/aws/Database/Amazon-ElastiCache.svg shape: image } api -> db: query api -> cache: get } client: Client client -> services.api: request ``` --- # Sequence Diagram (D2) ![Sequence Diagram](https://diagrams.gocapable.com/images/att1226408117.svg) ``` api sequence: { shape: sequence_diagram client api db client -> api: GET /users api -> db: SELECT * FROM users db -> api: rows api -> client: 200 OK } ``` --- # Shape Variations (D2) ![Shape Variations](https://diagrams.gocapable.com/images/att1227096220.svg) ``` Start: Begin { shape: oval style.fill: "#e8f5e9" } Process: Do work { shape: hexagon style.fill: "#e3f2fd" } Decision: Check { shape: diamond style.fill: "#fff3e0" } Step1: First step { shape: step } Step2: Second step { shape: step } End: Done { shape: circle style.fill: "#ffebee" } Start -> Process -> Decision Decision -> Step1: yes Decision -> End: no Step1 -> Step2 -> Process ``` --- # SQL Schema Diagram (D2) ![SQL Schema Diagram](https://diagrams.gocapable.com/images/att1227128969.svg) ``` costumes: { shape: sql_table id: int {constraint: primary_key} silliness: int monster: int last_updated: timestamp } monsters: { shape: sql_table id: int {constraint: primary_key} movie: string weight: int last_updated: timestamp } costumes.monster -> monsters.id ``` --- # UML Class Diagram (D2) ![UML Class Diagram](https://diagrams.gocapable.com/images/att1226932372.svg) ``` D2 Parser: { shape: class +reader: io.RuneReader # Default visibility is + so no need to specify. readerPos: d2ast.Position # Private field. -lookahead: "[]rune" # Escape the # to prevent being parsed as comment # lookaheadPos: d2ast.Position # Or just wrap in quotes "#peekn(n int)": (s string, eof bool) +peek(): (r rune, eof bool) rewind() commit() } ``` --- # DBML 📝 DBML stands for Database Markup Language. It is written in a human‑readable, code-like format (similar feel to Markdown or a lighter SQL) for defining tables and columns, specifying primary/foreign keys, describing relationships between tables, and adding notes and documentation. --- [eCommerce Database (DBML)](https://diagrams.gocapable.com/diagrams/ecommerce-database-dbml.html)[Inventory Management (DBML)](https://diagrams.gocapable.com/diagrams/inventory-management-dbml.html)[Social Media Database (DBML)](https://diagrams.gocapable.com/diagrams/social-media-database-dbml.html) --- # eCommerce Database (DBML) ![E-commerce database](https://diagrams.gocapable.com/images/att1225752780.svg) ``` Table ecommerce_merchants { id int country_code int merchant_name varchar created_at varchar admin_id int Indexes { (id, country_code) [pk] } } Table users { id int [pk, increment] full_name varchar created_at timestamp country_code int } Table countries { code int [pk] name varchar continent_name varchar } Table ecommerce_order_items { order_id int product_id int quantity int [default: 1] } Table ecommerce_orders { id int [pk] user_id int [not null, unique] status varchar created_at varchar } Enum ecommerce_products_status { out_of_stock in_stock running_low } Table ecommerce_products { id int [pk] name varchar merchant_id int [not null] price int status ecommerce_products_status created_at datetime [default: `now()`] Indexes { (merchant_id, status) [name: 'product_status'] id [unique] } } Table ecommerce_product_tags { id int [pk] name varchar } Table ecommerce_merchant_periods { id int [pk] merchant_id int country_code int start_date datetime end_date datetime } Ref: users.country_code > countries.code Ref: ecommerce_merchants.country_code > countries.code Ref: ecommerce_merchants.admin_id > users.id Ref: ecommerce_order_items.order_id > ecommerce_orders.id Ref: ecommerce_order_items.product_id > ecommerce_products.id Ref: ecommerce_products.merchant_id > ecommerce_merchants.id Ref: ecommerce_merchant_periods.merchant_id > ecommerce_merchants.id Ref: ecommerce_merchant_periods.country_code > ecommerce_merchants.country_code ``` --- # Inventory Management (DBML) ![Inventory management](https://diagrams.gocapable.com/images/att1225818248.svg) ``` Table suppliers { id int [pk, increment] name varchar contact_email varchar } Table products { id int [pk, increment] name varchar supplier_id int price decimal stock int } Table inventory_log { id int [pk, increment] product_id int quantity int change_date datetime } Ref: products.supplier_id > suppliers.id Ref: inventory_log.product_id > products.id ``` --- # Social Media Database (DBML) ![Social media database](https://diagrams.gocapable.com/images/att1226571913.svg) ``` Table follows { following_user_id integer followed_user_id integer created_at timestamp } Table users { id integer [primary key] username varchar role varchar created_at timestamp } Table posts { id integer [primary key] title varchar body text [note: 'Content of the post'] user_id integer status varchar created_at timestamp } Ref: posts.user_id > users.id // many-to-one Ref: users.id < follows.following_user_id Ref: users.id < follows.followed_user_id ``` --- # DITAA DITAA is a small diagramming framework that lets you create diagrams using plain text “ASCII art,” which are then automatically rendered into proper images (like PNG or SVG). --- [User Request Flow (DITAA)](https://diagrams.gocapable.com/diagrams/user-request-flow-ditaa.html) --- # User Request Flow (DITAA) ![User Request Flow](https://diagrams.gocapable.com/images/att1228210228.svg) ``` +--------+ | | | User | | | +--------+ ^ request | v +------------+ | | | Capable | | |----+ +------------+ | ^ ^ | inflate | | | v +---------+ +-------------+ | | | Ditaa | | |----+ +-------------+ | ^ | process | | +-------+ ``` --- # DMN DMN is a standard for modelling decision logic. It makes complex rules easier to understand by separating the decision itself from the processes, systems, and people that use it. With DMN diagrams in our app, teams can document decision requirements, map dependencies, and make rule-based decisions easier to review and maintain. * **Clearer decision logic:** Visual diagrams make it easier to see how inputs, rules, and outcomes connect. * **Better collaboration:** Product, operations, compliance, and engineering teams can work from the same shared model. * **Improved governance:** Decision rules are easier to audit, explain, and update over time. * **Faster delivery:** Teams can align on decision behaviour before implementation, reducing rework. DMN diagrams can be used for eligibility checks, pricing rules, risk assessments, approvals, policy decisions, and any area where repeatable business logic needs to be made explicit. ![image-20260529-232643.png](https://diagrams.gocapable.com/images/d37dcf8b-6fb3-4c4d-a905-a75a9bd2763b.webp) --- # ERD **Erd** is a lightweight, plain-text domain-specific language for describing entity-relationship diagrams. It is designed to let you define ER diagrams using a simple, human-readable syntax. --- [Attribute Styling (ERD)](https://diagrams.gocapable.com/diagrams/attribute-styling-erd.html)[eCommerce Database (ERD)](https://diagrams.gocapable.com/diagrams/ecommerce-database-erd.html)[Entity Relationship Diagram (ERD)](https://diagrams.gocapable.com/diagrams/entity-relationship-diagram-erd.html)[Many-to-many (ERD)](https://diagrams.gocapable.com/diagrams/many-to-many-erd.html) --- # Attribute Styling (ERD) ![Attribute Styling](https://diagrams.gocapable.com/images/att1227227320.svg) ``` title {label: "Styled entities and attributes", size: "16"} [User] {bgcolor: "#e8f5e9"} *id {label: "uuid, PK"} email {label: "varchar(255), unique, not null"} created_at {label: "timestamptz, default now()"} [Profile] {bgcolor: "#e3f2fd"} *user_id {label: "uuid, FK"} display_name {label: "varchar(100), null"} avatar_url {label: "text, null"} [Session] {bgcolor: "#fff3e0"} *id {label: "uuid, PK"} +user_id {label: "uuid, FK, not null"} expires_at {label: "timestamptz, not null"} User *--1 Profile {label: "has one"} User 1--* Session {label: "has many"} ``` --- # eCommerce Database (ERD) ![Simple E-commerce](https://diagrams.gocapable.com/images/att1226145963.svg) ``` title {label: "E-commerce schema", size: "16"} [Customer] {bgcolor: "#d0e0d0"} *customer_id {label: "int, not null"} name {label: "varchar, null"} email {label: "varchar, not null"} [Product] {bgcolor: "#d0e0d0"} *product_id {label: "int, not null"} name {label: "varchar, not null"} price {label: "decimal, not null"} [Order] {bgcolor: "#ececfc"} *order_id {label: "int, not null"} +customer_id {label: "int, not null"} order_date {label: "date, not null"} total {label: "decimal, null"} [OrderItem] {bgcolor: "#ececfc"} *+order_id {label: "int, not null"} *+product_id {label: "int, not null"} quantity {label: "int, not null"} price {label: "decimal, not null"} Customer 1--* Order Order 1--* OrderItem Product 1--* OrderItem ``` --- # Entity Relationship Diagram (ERD) ![Entity-Relationship Diagram](https://diagrams.gocapable.com/images/att1226571919.svg) ``` title {label: "nfldb Entity-Relationship diagram (condensed)", size: "20"} # Entities [player] {bgcolor: "#d0e0d0"} *player_id {label: "varchar, not null"} full_name {label: "varchar, null"} team {label: "varchar, not null"} position {label: "player_pos, not null"} status {label: "player_status, not null"} [team] {bgcolor: "#d0e0d0"} *team_id {label: "varchar, not null"} city {label: "varchar, not null"} name {label: "varchar, not null"} [game] {bgcolor: "#ececfc"} *gsis_id {label: "gameid, not null"} start_time {label: "utctime, not null"} week {label: "usmallint, not null"} season_year {label: "usmallint, not null"} season_type {label: "season_phase, not null"} finished {label: "boolean, not null"} home_team {label: "varchar, not null"} home_score {label: "usmallint, not null"} away_team {label: "varchar, not null"} away_score {label: "usmallint, not null"} [drive] {bgcolor: "#ececfc"} *+gsis_id {label: "gameid, not null"} *drive_id {label: "usmallint, not null"} start_field {label: "field_pos, null"} start_time {label: "game_time, not null"} end_field {label: "field_pos, null"} end_time {label: "game_time, not null"} pos_team {label: "varchar, not null"} pos_time {label: "pos_period, null"} [play] {bgcolor: "#ececfc"} *+gsis_id {label: "gameid, not null"} *+drive_id {label: "usmallint, not null"} *play_id {label: "usmallint, not null"} time {label: "game_time, not null"} pos_team {label: "varchar, not null"} yardline {label: "field_pos, null"} down {label: "smallint, null"} yards_to_go {label: "smallint, null"} [play_player] {bgcolor: "#ececfc"} *+gsis_id {label: "gameid, not null"} *+drive_id {label: "usmallint, not null"} *+play_id {label: "usmallint, not null"} *+player_id {label: "varchar, not null"} team {label: "varchar, not null"} [meta] {bgcolor: "#fcecec"} version {label: "smallint, null"} season_type {label: "season_phase, null"} season_year {label: "usmallint, null"} week {label: "usmallint, null"} # Relationships player *--1 team game *--1 team {label: "home"} game *--1 team {label: "away"} drive *--1 team play *--1 team play_player *--1 team game 1--* drive game 1--* play game 1--* play_player drive 1--* play drive 1--* play_player play 1--* play_player player 1--* play_player ``` --- # Many-to-many (ERD) ![Many-to-Many](https://diagrams.gocapable.com/images/att1226571925.svg) ``` title {label: "Many-to-many via junction", size: "16"} [Student] {bgcolor: "#d0e0d0"} *student_id {label: "int, not null"} name {label: "varchar, not null"} [Course] {bgcolor: "#d0e0d0"} *course_id {label: "int, not null"} title {label: "varchar, not null"} credits {label: "int, null"} [Enrollment] {bgcolor: "#fcecec"} *+student_id {label: "int, not null"} *+course_id {label: "int, not null"} enrolled_at {label: "date, not null"} grade {label: "varchar, null"} Student 1--* Enrollment Course 1--* Enrollment ``` --- # Excalidraw Excalidraw is an open‑source, web‑based diagram and whiteboard editor designed to feel like drawing on a physical sketchpad. --- [Flowchart with Images (Excalidraw)](https://diagrams.gocapable.com/diagrams/flowchart-with-images-excalidraw.html)[Mindmap (Excalidraw)](https://diagrams.gocapable.com/diagrams/mindmap-excalidraw.html)[Mobile Wireframe (Excalidraw)](https://diagrams.gocapable.com/diagrams/mobile-wireframe-excalidraw.html)[Profiling Diagram (Excalidraw)](https://diagrams.gocapable.com/diagrams/profiling-diagram-excalidraw.html)[Wireframe (Excalidraw)](https://diagrams.gocapable.com/diagrams/wireframe-excalidraw.html) --- # Flowchart with Images (Excalidraw) ![Capable Images](https://diagrams.gocapable.com/images/att1421158638.png) --- # Mindmap (Excalidraw) ![Mindmap](https://diagrams.gocapable.com/images/att1421815216.png) --- # Mobile Wireframe (Excalidraw) ![Mobile Wireframe](https://diagrams.gocapable.com/images/att1422273704.png) --- # Profiling Diagram (Excalidraw) ![Simple profiling diagram](https://diagrams.gocapable.com/images/att1422917893.png) --- # Wireframe (Excalidraw) ![Wireframe](https://diagrams.gocapable.com/images/att1421815232.png) --- # GraphViz Graphviz is an open‑source graph visualization software package. It takes a text description of a graph (nodes and edges) and automatically lays it out as a diagram. --- [Record/Struct (GraphViz)](https://diagrams.gocapable.com/diagrams/record-struct-graphviz.html)[State Diagram (GraphViz)](https://diagrams.gocapable.com/diagrams/state-diagram-graphviz.html)[Subgraph/Cluster (GraphViz)](https://diagrams.gocapable.com/diagrams/subgraph-cluster-graphviz.html)[Undirected Graph (GraphViz)](https://diagrams.gocapable.com/diagrams/undirected-graph-graphviz.html) --- # Record/Struct (GraphViz) ![Record / Struct](https://diagrams.gocapable.com/images/att1227063461.svg) ``` digraph struct { rankdir=LR; node [shape=record]; User [label=" id | name | email"]; Order [label=" order_id | user_id | total | status"]; Item [label=" item_id | order_id | product | qty"]; User:f0 -> Order:f1; Order:f0 -> Item:f1; } ``` --- # State Diagram (GraphViz) ![State Diagram](https://diagrams.gocapable.com/images/att1225982159.svg) ``` digraph finite_state_machine { rankdir=LR; size="8,5" node [shape = doublecircle]; Start EndA EndB Final; node [shape = circle]; Start -> Choice1 [label = "SS(B)"]; Start -> Choice2 [label = "SS(S)"]; Choice2 -> EndA [label = "S($end)"]; Choice1 -> State1 [label = "SS(b)"]; Choice1 -> State2 [label = "SS(a)"]; Choice1 -> EndB [label = "S(A)"]; State2 -> State3 [label = "S(b)"]; State2 -> State2 [label = "S(a)"]; State1 -> State1 [label = "S(b)"]; State1 -> State2 [label = "S(a)"]; State3 -> Final [label = "S(b)"]; State3 -> State2 [label = "S(a)"]; Final -> State1 [label = "S(b)"]; Final -> State2 [label = "S(a)"]; } ``` --- # Subgraph/Cluster (GraphViz) ![Subgraph / Cluster](https://diagrams.gocapable.com/images/att1225949331.svg) --- # Undirected Graph (GraphViz) ![Undirected Graph](https://diagrams.gocapable.com/images/att1227161765.svg) ``` graph G { layout=fdp; A -- B [label="2"]; A -- C [label="1"]; B -- C [label="4"]; B -- D [label="3"]; C -- D [label="1"]; D -- E [label="2"]; C -- E [label="5"]; } ``` --- # Mermaid Mermaid diagrams are text-based diagrams you write in a simple “code” syntax that then render as flowcharts, sequence diagrams, and many other visual formats. Instead of drawing shapes manually, you describe the diagram in plain text. --- [Block Diagram (Mermaid)](https://diagrams.gocapable.com/diagrams/block-diagram-mermaid.html)[Class Diagram (Mermaid)](https://diagrams.gocapable.com/diagrams/class-diagram-mermaid.html)[Entity Relationship Diagram (Mermaid)](https://diagrams.gocapable.com/diagrams/entity-relationship-diagram-mermaid.html)[Flowchart (Mermaid)](https://diagrams.gocapable.com/diagrams/flowchart-mermaid.html)[Gantt Diagram (Mermaid)](https://diagrams.gocapable.com/diagrams/gantt-diagram-mermaid.html)[Git Graph (Mermaid)](https://diagrams.gocapable.com/diagrams/git-graph-mermaid.html)[Mindmap (Mermaid)](https://diagrams.gocapable.com/diagrams/mindmap-mermaid.html)[Packet Diagram (Mermaid)](https://diagrams.gocapable.com/diagrams/packet-diagram-mermaid.html)[Pie Chart (Mermaid)](https://diagrams.gocapable.com/diagrams/pie-chart-mermaid.html)[Process Diagram (Mermaid)](https://diagrams.gocapable.com/diagrams/process-diagram-mermaid.html)[Quadrant Chart (Mermaid)](https://diagrams.gocapable.com/diagrams/quadrant-chart-mermaid.html)[Radar Chart (Mermaid)](https://diagrams.gocapable.com/diagrams/radar-chart-mermaid.html)[Requirement Diagram (Mermaid)](https://diagrams.gocapable.com/diagrams/requirement-diagram-mermaid.html)[Sankey Diagram (Mermaid)](https://diagrams.gocapable.com/diagrams/sankey-diagram-mermaid.html)[Sequence Diagram (Mermaid)](https://diagrams.gocapable.com/diagrams/sequence-diagram-mermaid.html)[State Diagram (Mermaid)](https://diagrams.gocapable.com/diagrams/state-diagram-mermaid.html)[User Journey (Mermaid)](https://diagrams.gocapable.com/diagrams/user-journey-mermaid.html)[XY Chart (Mermaid)](https://diagrams.gocapable.com/diagrams/xy-chart-mermaid.html) --- # Block Diagram (Mermaid) ![Block Diagram](https://diagrams.gocapable.com/images/att1230996556.svg) ``` block-beta columns 3 doc>"Document"]:3 space down1<[" "]>(down) space block:e:3 l["left"] m("A wide one in the middle") r["right"] end space down2<[" "]>(down) space db[("DB")]:3 space:3 D space C db --> D C --> db D --> C style m fill:#d6d,stroke:#333,stroke-width:4px ``` --- # Class Diagram (Mermaid) ![Class Diagram](https://diagrams.gocapable.com/images/att1228308481.svg) ``` classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } ``` --- # Entity Relationship Diagram (Mermaid) ![Entity Relationship Diagram](https://diagrams.gocapable.com/images/att1226801333.svg) ``` erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ INVOICE : "liable for" DELIVERY-ADDRESS ||--o{ ORDER : receives INVOICE ||--|{ ORDER : covers ORDER ||--|{ ORDER-ITEM : includes PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT ||--o{ ORDER-ITEM : "ordered in" ``` --- # Flowchart (Mermaid) ![Flowchart](https://diagrams.gocapable.com/images/att1227129022.svg) ``` graph TD A[You] -->|Decide to explore| B(Magical Garden Entrance) B --> C{Choose a Path} C -->|Left Path| D[Talking Flowers] C -->|Right Path| E[Whispering Trees] D --> F[Tea Party with the Flowers] E --> G[Secret Treehouse Meeting] F --> H{Find a Hidden Key?} G --> I{Discover a Map?} H -->|Yes| J[Unlock the Treasure Chest] I -->|Yes| K[Follow the Map to a Hidden Glade] J --> L[Discover Ancient Artifacts] K --> M[Find the Legendary Gemstone] ``` --- # Gantt Diagram (Mermaid) ![Gantt Diagram](https://diagrams.gocapable.com/images/att1228275715.svg) ``` gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d ``` --- # Git Graph (Mermaid) ![Git Graph](https://diagrams.gocapable.com/images/att1227620354.svg) ``` gitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit ``` --- # Mindmap (Mermaid) ![Mindmap](https://diagrams.gocapable.com/images/att1227587594.svg) ``` mindmap root((mindmap)) Origins Long history ::icon(fa fa-book) Popularisation British popular psychology author Tony Buzan Research On effectivness
and features On Automatic creation Uses Creative techniques Strategic planning Argument mapping Tools Pen and paper Mermaid ``` --- # Packet Diagram (Mermaid) ![Packet Diagram](https://diagrams.gocapable.com/images/att1228210186.svg) ``` --- title: "TCP Packet" --- packet 0-15: "Source Port" 16-31: "Destination Port" 32-63: "Sequence Number" 64-95: "Acknowledgment Number" 96-99: "Data Offset" 100-105: "Reserved" 106: "URG" 107: "ACK" 108: "PSH" 109: "RST" 110: "SYN" 111: "FIN" 112-127: "Window" 128-143: "Checksum" 144-159: "Urgent Pointer" 160-191: "(Options and Padding)" 192-255: "Data (variable length)" ``` --- # Pie Chart (Mermaid) ![Pie Chart](https://diagrams.gocapable.com/images/att1228406785.svg) ``` pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 15 ``` --- # Process Diagram (Mermaid) ![Flowchart](https://diagrams.gocapable.com/images/att1228537888.svg) ``` flowchart TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] ``` --- # Quadrant Chart (Mermaid) ![Quadrant Chart](https://diagrams.gocapable.com/images/att1228275722.svg) ``` quadrantChart title Reach and engagement of campaigns x-axis Low Reach --> High Reach y-axis Low Engagement --> High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78] ``` --- # Radar Chart (Mermaid) ![Radar Chart](https://diagrams.gocapable.com/images/att1227587615.svg) ``` --- title: "Grades" --- radar-beta axis m["Math"], s["Science"], e["English"] axis h["History"], g["Geography"], a["Art"] curve a["Alice"]{85, 90, 80, 70, 75, 90} curve b["Bob"]{70, 75, 85, 80, 90, 85} max 100 min 0 ``` --- # Requirement Diagram (Mermaid) ![Requirements Diagram](https://diagrams.gocapable.com/images/att1227915285.svg) ``` requirementDiagram requirement test_req { id: 1 text: the test text. risk: high verifymethod: test } functionalRequirement test_req2 { id: 1.1 text: the second test text. risk: low verifymethod: inspection } performanceRequirement test_req3 { id: 1.2 text: the third test text. risk: medium verifymethod: demonstration } interfaceRequirement test_req4 { id: 1.2.1 text: the fourth test text. risk: medium verifymethod: analysis } physicalRequirement test_req5 { id: 1.2.2 text: the fifth test text. risk: medium verifymethod: analysis } designConstraint test_req6 { id: 1.2.3 text: the sixth test text. risk: medium verifymethod: analysis } element test_entity { type: simulation } element test_entity2 { type: word doc docRef: reqs/test_entity } element test_entity3 { type: "test suite" docRef: github.com/all_the_tests } test_entity - satisfies -> test_req2 test_req - traces -> test_req2 test_req - contains -> test_req3 test_req3 - contains -> test_req4 test_req4 - derives -> test_req5 test_req5 - refines -> test_req6 test_entity3 - verifies -> test_req5 test_req <- copies - test_entity2 ``` --- # Sankey Diagram (Mermaid) ![Sankey](https://diagrams.gocapable.com/images/att1228701705.svg) ``` --- config: sankey: showValues: false --- sankey-beta %% source,target,value Electricity grid,Over generation / exports,104.453 Electricity grid,Heating and cooling - homes,113.726 Electricity grid,H2 conversion,27.14 ``` --- # Sequence Diagram (Mermaid) ![Sequence Diagram](https://diagrams.gocapable.com/images/att1225523367.svg) ``` sequenceDiagram Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great! ``` --- # State Diagram (Mermaid) ![State Diagram](https://diagrams.gocapable.com/images/att1227096246.svg) ``` stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] ``` --- # User Journey (Mermaid) ![User Journey](https://diagrams.gocapable.com/images/att1227096240.svg) ``` journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 3: Me ``` --- # XY Chart (Mermaid) ![XY Chart](https://diagrams.gocapable.com/images/att1228275729.svg) ``` xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] ``` --- # Nomnomml Nomnoml diagrams are simple text-based diagrams for drawing class/box-and-line style diagrams using an ASCII syntax. --- [Class Hierarchy (Nomnomml)](https://diagrams.gocapable.com/diagrams/class-hierarchy-nomnomml.html) --- # Class Hierarchy (Nomnomml) ![Class Hierarchy](https://diagrams.gocapable.com/images/att1227620386.svg) ``` [Collections| [Iterable] <:- [Collection] [Collection] <:-- [AbstractCollection] [Collection] <:- [Set] [Collection] <:- [List] [Collection] <:- [Queue] [AbstractCollection] <:- [AbstractSet] [AbstractCollection] <:- [AbstractList] [AbstractCollection] <:- [AbstractQueue] [Set] <:-- [AbstractSet] [List] <:-- [AbstractList] [Queue] <:-- [AbstractQueue] ] ``` --- # Pikchr Pikchr is a small diagramming language and engine designed to turn plain text descriptions into diagrams, typically rendered as SVG. --- [Architecture Diagram (Pikchr)](https://diagrams.gocapable.com/diagrams/architecture-diagram-pikchr.html) --- # Architecture Diagram (Pikchr) ![Architecture](https://diagrams.gocapable.com/images/att1228308498.svg) ``` lineht *= 0.4 $margin = lineht*2.5 scale = 0.75 fontscale = 1.1 charht *= 1.15 down In: box "Interface" wid 150% ht 75% fill white arrow CP: box same "SQL Command" "Processor" arrow VM: box same "Virtual Machine" arrow down 1.25*$margin BT: box same "B-Tree" arrow box same "Pager" arrow OS: box same "OS Interface" box same with .w at 1.25*$margin east of 1st box.e "Tokenizer" arrow box same "Parser" arrow CG: box same ht 200% "Code" "Generator" UT: box same as 1st box at (Tokenizer,Pager) "Utilities" move lineht TC: box same "Test Code" arrow from CP to 1/4 chop arrow from 1/3 to CP chop box ht (In.n.y-VM.s.y)+$margin wid In.wid+$margin at CP fill 0xd8ecd0 behind In line invis from 0.25*$margin east of last.sw up last.ht "Core" italic aligned box ht (BT.n.y-OS.s.y)+$margin wid In.wid+$margin at Pager fill 0xd0ece8 behind In line invis from 0.25*$margin east of last.sw up last.ht "Backend" italic aligned box ht (Tokenizer.n.y-CG.s.y)+$margin wid In.wid+$margin at 1/2 fill 0xe8d8d0 behind In line invis from 0.25*$margin west of last.se up last.ht "SQL Compiler" italic aligned box ht (UT.n.y-TC.s.y)+$margin wid In.wid+$margin at 1/2 fill 0xe0ecc8 behind In line invis from 0.25*$margin west of last.se up last.ht "Accessories" italic aligned ``` --- # PlantUML PlantUML focuses primarily on UML (Unified Modeling Language) diagrams - that's where it gets its name - but has expanded well beyond UML over time. PlantUML is most widely used - and works best - for sequence diagrams and class diagrams. These are its most mature and feature-rich diagram types, and what most teams reach for it to create. --- [Activity Diagram (PlantUML)](https://diagrams.gocapable.com/diagrams/activity-diagram-plantuml.html)[Class Diagram (PlantUML)](https://diagrams.gocapable.com/diagrams/class-diagram-plantuml.html)[Component Diagram (PlantUML)](https://diagrams.gocapable.com/diagrams/component-diagram-plantuml.html)[Deployment Diagram (PlantUML)](https://diagrams.gocapable.com/diagrams/deployment-diagram-plantuml.html)[JSON Structure (PlantUML)](https://diagrams.gocapable.com/diagrams/json-structure-plantuml.html)[Mindmap (PlantUML)](https://diagrams.gocapable.com/diagrams/mindmap-plantuml.html)[Network Diagram (PlantUML)](https://diagrams.gocapable.com/diagrams/network-diagram-plantuml.html)[Object Diagram (PlantUML)](https://diagrams.gocapable.com/diagrams/object-diagram-plantuml.html)[Sequence Diagram (PlantUML)](https://diagrams.gocapable.com/diagrams/sequence-diagram-plantuml.html)[State Diagram (PlantUML)](https://diagrams.gocapable.com/diagrams/state-diagram-plantuml.html)[Timing Diagram (PlantUML)](https://diagrams.gocapable.com/diagrams/timing-diagram-plantuml.html)[Use Case Diagram (PlantUML)](https://diagrams.gocapable.com/diagrams/use-case-diagram-plantuml.html)[Wireframe (PlantUML)](https://diagrams.gocapable.com/diagrams/wireframe-plantuml.html) --- # Activity Diagram (PlantUML) ![Activity Diagram](https://diagrams.gocapable.com/images/att1228537896.svg) ``` @startuml skin rose start :ClickServlet.handleRequest(); :new page; if (Page.onSecurityCheck) then (true) :Page.onInit(); if (isForward?) then (no) :Process controls; if (continue processing?) then (no) stop endif if (isPost?) then (yes) :Page.onPost(); else (no) :Page.onGet(); endif :Page.onRender(); endif else (false) endif if (do redirect?) then (yes) :redirect process; else if (do forward?) then (yes) :Forward request; else (no) :Render page template; endif endif stop @enduml ``` --- # Class Diagram (PlantUML) ![Class Diagram](https://diagrams.gocapable.com/images/att1227784233.svg) ``` @startuml skin rose abstract class AbstractList abstract AbstractCollection interface List interface Collection List <|-- AbstractList Collection <|-- AbstractCollection Collection <|- List AbstractCollection <|- AbstractList AbstractList <|-- ArrayList class ArrayList { Object[] elementData size() } enum TimeUnit { DAYS HOURS MINUTES } annotation SuppressWarnings annotation Annotation { annotation with members String foo() String bar() } @enduml ``` --- # Component Diagram (PlantUML) ![Component Diagram](https://diagrams.gocapable.com/images/att1227784239.svg) ``` @startuml skin rose skinparam packageBackgroundColor #ffffff skinparam packageBorderColor #333333 package "Some Group" { HTTP - [First Component] [Another Component] } node "Other Groups" { FTP - [Second Component] [First Component] --> FTP } cloud { [Example 1] } database "MySql" { folder "This is my folder" { [Folder 3] } frame "Foo" { [Frame 4] } } [Another Component] --> [Example 1] [Example 1] --> [Folder 3] [Folder 3] --> [Frame 4] @enduml ``` --- # Deployment Diagram (PlantUML) ![Deployment Diagram](https://diagrams.gocapable.com/images/att1227817005.svg) ``` @startuml skin rose actor foo1 actor foo2 foo1 <-0-> foo2 foo1 <-(0)-> foo2 (ac1) -le(0)-> left1 ac1 -ri(0)-> right1 ac1 .up(0).> up1 ac1 ~up(0)~> up2 ac1 -do(0)-> down1 ac1 -do(0)-> down2 actor1 -0)- actor2 component comp1 component comp2 comp1 *-0)-+ comp2 [comp3] <-->> [comp4] boundary b1 control c1 b1 -(0)- c1 component comp1 interface interf1 comp1 #~~( interf1 :mode1actor: -0)- fooa1 :mode1actorl: -ri0)- foo1l [component1] 0)-(0-(0 [componentC] () component3 )-0-(0 "foo" [componentC] [aze1] #-->> [aze2] @enduml ``` --- # JSON Structure (PlantUML) ![JSON Structure](https://diagrams.gocapable.com/images/att1228505129.svg) ``` @startjson { "firstName": "John", "lastName": "Smith", "isAlive": true, "age": 27, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021-3100" }, "phoneNumbers": [ { "type": "home", "number": "212 555-1234" }, { "type": "office", "number": "646 555-4567" } ], "children": [], "spouse": null } @endjson ``` --- # Mindmap (PlantUML) ![Mindmap](https://diagrams.gocapable.com/images/att1228537904.svg) ``` @startmindmap *[#Orange] root node *[#lightgreen] some first level node *[#FFBBCC] second level node *[#lightblue] another second level node *[#lightgreen] another first level node @endmindmap ``` --- # Network Diagram (PlantUML) ![Network Diagram](https://diagrams.gocapable.com/images/att1230997110.svg) ``` @startnwdiag nwdiag { network dmz { address = "210.x.x.x/24" web01 [address = "210.x.x.1"]; web02 [address = "210.x.x.2"]; } network internal { address = "172.x.x.x/24"; web01 [address = "172.x.x.1"]; web02 [address = "172.x.x.2"]; db01; db02; } } @endnwdiag ``` --- # Object Diagram (PlantUML) ![Object Diagram](https://diagrams.gocapable.com/images/att1227915291.svg) ``` @startuml skin rose object London object Washington object Berlin object NewYork map CapitalCity { UK *-> London USA *--> Washington Germany *---> Berlin } NewYork --> CapitalCity::USA @enduml ``` --- # Sequence Diagram (PlantUML) ![Sequence Diagram](https://diagrams.gocapable.com/images/att1228013601.svg) ``` @startuml skin rose participant User User -> A: DoWork activate A #FFBBBB A -> A: Internal call activate A #DarkSalmon A -> B: << createRequest >> activate B B --> A: RequestCreated deactivate B deactivate A A -> User: Done deactivate A @enduml ``` --- # State Diagram (PlantUML) ![State diagram](https://diagrams.gocapable.com/images/att1228603434.svg) ``` @startuml title Simple Order Fulfilment Flow [*] --> Cart_Empty state Cart_Empty { [*] --> Idle Idle --> Item_Added : add item } Cart_Empty --> Checking_Out : proceed to checkout state Checking_Out { [*] --> Collecting_Details Collecting_Details --> Payment_Processing : submit payment Payment_Processing --> Payment_Failed : payment error Payment_Processing --> Order_Placed : payment OK Payment_Failed --> Collecting_Details : retry } Checking_Out --> Order_Fulfilled : ship order Order_Fulfilled --> Completed Completed --> [*] @enduml ``` --- # Timing Diagram (PlantUML) ![Timing Diagram](https://diagrams.gocapable.com/images/att1227980833.svg) ``` @startuml robust "Web Browser" as WB concise "Web User" as WU WB is Initializing WU is Absent @WB 0 is idle +200 is Processing +100 is Waiting WB@0 <-> @50 : {50 ms lag} @WU 0 is Waiting +500 is ok @200 <-> @+150 : {150 ms} @enduml ``` --- # Use Case Diagram (PlantUML) ![Use Case Diagram](https://diagrams.gocapable.com/images/att1227784226.svg) ``` @startuml skin rose :Main Admin: as Admin (Use the application) as (Use) User -> (Start) User --> (Use) Admin ---> (Use) note right of Admin : This is an example. note right of (Use) A note can also be on several lines end note note "This note is connected to several objects." as N2 (Start) .. N2 N2 .. (Use) @enduml ``` --- # Wireframe (PlantUML) ![Wireframe](https://diagrams.gocapable.com/images/att1228374062.svg) ``` @startsalt {+ {/ General | Fullscreen | Behavior | Saving } { { Open image in: | ^Smart Mode^ } [X] Smooth images when zoomed [X] Confirm image deletion [ ] Show hidden images } [Close] } @endsalt ``` --- # Structurizr Structurizr is a software architecture modeling tool and ecosystem built around the C4 model. You describe systems, containers, components, and relationships using a text-based DSL rather than drawing boxes manually. --- [System Context (Structurizr)](https://diagrams.gocapable.com/diagrams/system-context-structurizr.html) --- # System Context (Structurizr) ![System Context](https://diagrams.gocapable.com/images/att1228701731.svg) ``` workspace { model { user = person "User" softwareSystem = softwareSystem "Software System" { webapp = container "Web Application" } user -> webapp "Uses" } views { systemContext softwareSystem { include * autolayout } } } ``` --- # SVGbob Svgbob is a tool that turns ASCII art diagrams into proper SVG images. --- [ASCII Art (SVGbob)](https://diagrams.gocapable.com/diagrams/ascii-art-svgbob.html) --- # ASCII Art (SVGbob) ![ASCII Art](https://diagrams.gocapable.com/images/att1227882548.svg) ``` .-,( ),-. ___ _ .-( )-. [___]|=| -->( ) __________ /::/ |_| '-( ).-' --->[_...__... ] '-.( ).-' ____ __ '--->| | |==| |____| | | /::::/ |__| ``` --- # Symbolator Symbolator is a text‑to‑diagram library for electronic symbols and circuits. It lets you write textual descriptions of electronic components and connections. Symbolator then converts that text into standardized, professional‑looking graphical symbols. --- [Hardware Module (Symbolator)](https://diagrams.gocapable.com/diagrams/hardware-module-symbolator.html) --- # Hardware Module (Symbolator) ![Hardware Module](https://diagrams.gocapable.com/images/att1227718730.svg) ``` module demo_device #( //# {{}} parameter SIZE = 8, parameter RESET_ACTIVE_LEVEL = 1 ) ( //# {{clocks|Clocking}} input wire clock, //# {{control|Control signals}} input wire reset, input wire enable, //# {{data|Data ports}} input wire [SIZE-1:0] data_in, output wire [SIZE-1:0] data_out ); // ... endmodule ``` --- # TikZ 📝 **TikZ** stands for “TikZ ist kein Zeichenprogramm” (“TikZ is not a drawing program” - a recursive joke). TikZ is a diagram‑drawing language for LaTeX. It lets you _describe_ graphics in plain text and have LaTeX render them as high‑quality vector images that match the style of your document. --- [Circuit Diagram (TikZ)](https://diagrams.gocapable.com/diagrams/circuit-diagram-tikz.html)[Particle Decay (TikZ)](https://diagrams.gocapable.com/diagrams/particle-decay-tikz.html)[State Transition Diagram (TikZ)](https://diagrams.gocapable.com/diagrams/state-transition-diagram-tikz.html) --- # Circuit Diagram (TikZ) ![MOSFET Amplifier](https://diagrams.gocapable.com/images/att1227915312.svg) ``` % 18W MOSFET amplifier, with npn transistor. % Author: Ramón Jaramillo. \documentclass[margin=10pt]{standalone} \usepackage[siunitx]{circuitikz} \begin{document} \begin{tikzpicture}[scale=2] \draw[color=black, thick] (0,0) to [short,o-] (6,0){} % Baseline for connection to ground % Input and ground (0,1) node[]{\large{\textbf{INPUT}}} % Connection of passive components (5,0) node[ground]{} node[circ](4.5,0){} (0,2) to [pC, l=$C_1$, o-] (0.5,2) to [R,l=$R_1$,](1.5,2) to node[short]{}(2.6,2) (1.5,2) to [C, l=$C_2$, *-] (1.5,3) -| (5,3) (2.2,2) to [R, l=$R_2$, *-*] (2.2,3) (2.2,3) to [pC, l=$C_3$, *-] (2.2,5) -| (3,5) % Transistor Bipolar Q1 (3,0) to [R,l=$R_5$,-*] (3,1.5) to [Tnpn,n=npn1] (3,2.5) (npn1.E) node[right=3mm, above=5mm]{$Q_1$} % Labelling the NPN transistor (4,0) to [pC, l_=$C_4$, *-] (4, 1.5)--(3,1.5) (2.2,0) to [vR, l=$R_3$, *-*] (2.2,2) (3,2.5) to node[short]{}(3,3) (3,5) to [pR, n=pot1, l_=$R_4$, *-] (3,3) (3,5) to [R, l=$R_6$, *-] (5,5) to [short,*-o](5,5.5) node[right]{$V_S=40 V$} % Mosfet Transistors (5,3) to [Tnigfetd,n=mos1] (5,5) (mos1.B) node[anchor=west]{$Q_2$} % Labelling MOSFET Q2 Transistor (pot1.wiper) to [R, l=$R_7$] (4.5,4) -| (mos1.G) (5,1.5) to [Tpigfetd,n=mos2] (5,2.5) (5,0) to (mos2.S) (3,2.5) to [R, l=$R_8$, *-] (4.5,2.5) -| (mos2.G) (mos2.B) node[anchor=west]{$Q_3$} % Labelling MOSFET Q3 Transistor % Output (6,3) to [pC, l=$C_5$,-*](5,3) (6,3) to [short,-o] (6,2){} (mos1.S)--(mos2.D) (6,0) to [short,-o] (6,1){} node[above=7mm]{\large{\textbf{SPEAKER}}} ; \end{tikzpicture} \end{document} ``` --- # Particle Decay (TikZ) ![Particle Decay Diagram](https://diagrams.gocapable.com/images/att1228341285.svg) ``` % Author: Izaak Neutelings (Februari 2023) % Description: Decay of the Z boson to leptons. \documentclass[border=3pt,tikz]{standalone} \usetikzlibrary{calc} \usetikzlibrary{math} % for \tikzmath \usetikzlibrary{arrows.meta} % for arrow size \usetikzlibrary{decorations.pathmorphing} % for snakes \tikzset{>=latex} % for LaTeX arrow head \colorlet{myred}{red!75!black} \colorlet{myblue}{blue!70!black} %\colorlet{mydarkblue}{blue!50!black} \colorlet{mygreen}{green!60!black} \colorlet{myorange}{orange!75!yellow!90!black} \colorlet{isocol}{blue!70!black} % color isolation cone \colorlet{sigcol}{red!90!black} % color isolation cone \tikzstyle{track}=[->,line width=0.6,myred] \tikzstyle{dashed track}=[->,mygreen,line width=0.6,line cap=round, dash pattern=on 2.3 off 2.0] \tikzstyle{part}=[circle,ball color=#1,text=#1!30!black, postaction={fill=#1!77,fill opacity=0.8, draw=#1!60!black!90,thin}] \tikzstyle{mysmallarrow}=[-{Latex[length=4.2,width=3.5]},mygreen,thick] % JET CONE \newcommand\jetcone[6][sigcol]{{ \pgfmathanglebetweenpoints{\pgfpointanchor{#2}{center}}{\pgfpointanchor{#3}{center}} \pgfmathsetmacro\oang{#4/2} % half-opening angle \edef\e{#5} % ratio a/b ("eccentricity") of cone top \def\tmpL{tmpL-#2-#3} % unique coordinate name \edef\vang{\pgfmathresult} % angle of vector OV \tikzmath{ coordinate \C; \C = (#2)-(#3); % vector OV \x = veclen(\Cx,\Cy)*\e*sin(\oang)^2; % x coordinate P \y = tan(\oang)*(veclen(\Cx,\Cy)-\x); % y coordinate P \a = veclen(\Cx,\Cy)*sqrt(\e)*sin(\oang); % vertical radius \b = veclen(\Cx,\Cy)*tan(\oang)*sqrt(1-\e*sin(\oang)^2); % horizontal radius \angb = acos(sqrt(\e)*sin(\oang)); % angle of P in ellipse } \coordinate (\tmpL) at ($(#3)-(\vang:\x pt)+(\vang+90:\y pt)$); % tangency \draw[thin,#1!50!black,fill=#1!80!black!50,line cap=round,rotate=\vang] % cone back (#2) -- (\tmpL) arc(180-\angb:180+\angb:{\a pt} and {\b pt}) -- (#2); %-- cycle; \draw[thin,#1!50!black,rotate=\vang, % cone inside top color=#1!60!black!60,bottom color=#1!50!black!75,shading angle=\vang] (#3) ellipse({\a pt} and {\b pt}); #6 % extra tracks \draw[thin,#1!50!black,rotate=\vang,fill opacity=0.80, % cone front top color=#1!90!black!20,bottom color=#1!50!black!50,line cap=round,shading angle=\vang] (#2) -- (\tmpL) arc(180-\angb:180+\angb:{\a pt} and {\b pt}) -- (#2); %-- cycle; }} \begin{document} % Z -> mumu \begin{tikzpicture}[ scale=2.4, % set scale for all figures ] % Z BOSON \node[circle,part=myorange,inner sep=1.8pt,scale=1.1] (Z) at (0,0) {\textbf{Z}}; % MUONS \draw[track] (Z) to[bend right=12] (70:1.0) node[anchor=-80,inner sep=0pt] {$\mu$}; %^- \draw[track] (Z) to[bend left=12] (30:1.1) node[anchor=-160,inner sep=1pt] {$\mu$}; %^+ \end{tikzpicture} % TAU JET - THREE PRONG, PI ZERO\small \def\angiso{45} % opening angle of isolation cone (CMS: DR = 0.4 => 0.8*180/pi = 45.8) \def\angsig{12} % opening angle of signal cone (CMS: 0.05 <= DR <= 0.1 => 0.1*180/pi = 11.4) \def\e{0.11} % a/b ratio of ellipse minor and major radii \begin{tikzpicture}[ scale=2.4, % set scale for all figures every node/.style={inner sep=1,circle} %,draw=black!9,very thin} ] % Z BOSON \node[part=myorange,inner sep=1.8pt,scale=1.1] (Z) at (0,0) {\textbf{Z}}; % TAUS \node[part=mygreen,minimum size=8pt,scale=0.7] (T1) at (50:0.3) {}; \node[part=mygreen,minimum size=8pt,scale=0.7] (T2) at (-20:0.3) {}; \node[mygreen!80!black,anchor=-50,inner sep=1pt,scale=0.9] at (T1) {$\tau^+$}; \node[mygreen!80!black,anchor=60,inner sep=1pt,scale=0.9] at (T2) {$\tau^-$}; \draw[mysmallarrow] (Z) -- (T1); \draw[mysmallarrow] (Z) -- (T2); % MUONS \draw[track] (T1) to[out=20,in=-138] ++(32:1.22) node[anchor=-160,inner sep=0pt] {$\mu^+$}; % NEUTRINOS \begin{scope}[dashed track,opacity=0.4,thin] \draw (T1) --++ (80:0.64) node[anchor=-110,inner sep=0pt,scale=0.8] {$\overline{\nu}_\tau$}; \draw (T1) --++ (50:0.84) node[anchor=-150,inner sep=0pt,scale=0.8] {$\nu_\mu$}; \draw (T2) --++ (-29:0.84) node[anchor=160,inner sep=1pt,scale=0.8] {$\nu_\tau$}; \end{scope} % TAUH \begin{scope}[rotate around={-85:(T2)}] \coordinate (T2') at ($(T2)+(0,1pt)$); % isolation cone \coordinate (I) at ($(T2)+(0,0.92)$); % isolation cone \coordinate (S) at ($(T2)+(0,1.00)$); % signal cone \coordinate (T) at ($(T2')+(0,0.02)$); % tau vertex %\jetcone[isocol]{T2'}{I}{\angiso}{\e}{ % isolation cone \jetcone[sigcol]{T2'}{S}{\angsig}{\e}{ % signal cone \draw[dashed track] (T) --++ (92:1.18); %node[anchor=-85+\anang,inner sep=0.5] {$\pi^0$}; \draw[track] (T) to[out=90,in=-55] ++(100:1.18); %node[anchor=-70+\anang,inner sep={2.5*cos(\ang)^2-1.5}] {$\pi^-$}; \draw[track] (T) to[out=93,in=-110] ++(85:1.26); %node[anchor=-110+\anang,inner sep={0.6*sin(\ang)^2}] {$\pi^+$}; \draw[track] (T) to[out=88,in=-117] ++(83:1.11); %node[anchor=-145+\anang,inner sep={0.6*sin(\ang)^2}] {$\pi^+$}; } %} \node[myblue!80!black,anchor=-140,inner sep=0pt] at ($(T2)+(0,1.3)$) {$\tau_\mathrm{h}$}; \end{scope} \end{tikzpicture} \end{document} ``` --- # State Transition Diagram (TikZ) ![State Transition Diagram](https://diagrams.gocapable.com/images/att1228177439.svg) ``` \documentclass{standalone} \usepackage{tikz} \usetikzlibrary{automata, positioning, arrows, calc} \tikzset{ ->, % makes the edges directed >=stealth, % makes the arrow heads bold shorten >=2pt, shorten <=2pt, % shorten the arrow node distance=3cm, % specifies the minimum distance between two nodes. Change if n every state/.style={draw=blue!55,very thick,fill=blue!20}, % sets the properties for each ’state’ n initial text=$ $, % sets the text that appears on the start arrow } \begin{document} \begin{tikzpicture} \node[state, initial] (s0) {$S_0$}; \node[state, right of=s0] (s1) {$S_1$}; \node[state, right of=s1] (s2) {$S_2$}; \node[state, right of=s2] (s3) {$S_3$}; \node[state, right of=s3] (s4) {$S_4$}; \draw (s0) edge[loop above] node{$0,0$} (s0) (s0) edge[bend left] node[above]{$1,0$} (s1) % (s1) edge[bend left] node[above]{$0,0$} (s2) (s1) edge[bend left] node[above]{$1,0$} (s0) % (s2) edge[bend left] node[above]{$0,0$} (s3) (s2) edge[bend left=40] node[above]{$1,0$} (s0) % (s3) edge[bend left=50] node[above]{$0,0$} (s0) (s3) edge[bend left] node[above]{$1,0$} (s4) % (s4) edge[bend right=50] node[above]{$0,1$} (s0) (s4) edge[bend left=60] node[above]{$1,0$} (s0) ; \end{tikzpicture} \end{document} ``` --- # Vega Vega is a _declarative visualization system_ \- essentially a “grammar” for describing charts and interactive diagrams. Instead of writing imperative drawing code, you write a structured JSON spec like the ones in your templates (word cloud, packed bubbles, dot plots, etc.). --- [Area Chart (Vega)](https://diagrams.gocapable.com/diagrams/area-chart-vega.html)[Bar Chart (Vega)](https://diagrams.gocapable.com/diagrams/bar-chart-vega.html)[Bubble Chart (Vega)](https://diagrams.gocapable.com/diagrams/bubble-chart-vega.html)[Dot Plot (Vega)](https://diagrams.gocapable.com/diagrams/dot-plot-vega.html)[Pie Chart (Vega)](https://diagrams.gocapable.com/diagrams/pie-chart-vega.html)[Radar Diagram (Vega)](https://diagrams.gocapable.com/diagrams/radar-diagram-vega.html)[Scatter Plot (Vega)](https://diagrams.gocapable.com/diagrams/scatter-plot-vega.html)[Stacked Bar Chart (Vega)](https://diagrams.gocapable.com/diagrams/stacked-bar-chart-vega.html)[Word Cloud (Vega)](https://diagrams.gocapable.com/diagrams/word-cloud-vega.html) --- # Area Chart (Vega) ![Area chart](https://diagrams.gocapable.com/images/att1227980851.svg) ``` { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "An area chart example.", "width": 400, "height": 200, "padding": 5, "data": [ { "name": "table", "values": [ {"date": "2024-01-01", "value": 28}, {"date": "2024-02-01", "value": 55}, {"date": "2024-03-01", "value": 43}, {"date": "2024-04-01", "value": 91}, {"date": "2024-05-01", "value": 81}, {"date": "2024-06-01", "value": 53}, {"date": "2024-07-01", "value": 19}, {"date": "2024-08-01", "value": 87} ], "transform": [ { "type": "formula", "expr": "toDate(datum.date)", "as": "date" } ] } ], "scales": [ { "name": "xscale", "type": "time", "domain": {"data": "table", "field": "date"}, "range": "width" }, { "name": "yscale", "type": "linear", "domain": {"data": "table", "field": "value"}, "nice": true, "range": "height" } ], "axes": [ {"orient": "bottom", "scale": "xscale", "format": "%b %Y"}, {"orient": "left", "scale": "yscale"} ], "marks": [ { "type": "area", "from": {"data": "table"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "date"}, "y": {"scale": "yscale", "field": "value"}, "y2": {"scale": "yscale", "value": 0}, "fill": {"value": "steelblue"}, "fillOpacity": {"value": 0.5} } } } ] } ``` --- # Bar Chart (Vega) ![Bar chart](https://diagrams.gocapable.com/images/att1228046394.svg) ``` { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A simple bar chart with embedded data.", "width": 400, "height": 200, "padding": 5, "data": [ { "name": "table", "values": [ {"category": "A", "amount": 28}, {"category": "B", "amount": 55}, {"category": "C", "amount": 43}, {"category": "D", "amount": 91}, {"category": "E", "amount": 81}, {"category": "F", "amount": 53}, {"category": "G", "amount": 19}, {"category": "H", "amount": 87} ] } ], "scales": [ { "name": "xscale", "type": "band", "domain": {"data": "table", "field": "category"}, "range": "width", "padding": 0.05 }, { "name": "yscale", "type": "linear", "domain": {"data": "table", "field": "amount"}, "nice": true, "range": "height" } ], "axes": [ {"orient": "bottom", "scale": "xscale"}, {"orient": "left", "scale": "yscale"} ], "marks": [ { "type": "rect", "from": {"data": "table"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "category"}, "width": {"scale": "xscale", "band": 1}, "y": {"scale": "yscale", "field": "amount"}, "y2": {"scale": "yscale", "value": 0} }, "update": { "fill": {"value": "steelblue"} }, "hover": { "fill": {"value": "red"} } } } ] } ``` --- # Bubble Chart (Vega) ![Bubble chart](https://diagrams.gocapable.com/images/att1228537918.svg) ``` { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A packed bubble chart.", "usermeta": { "author": "David Bacci", "github": "https://github.com/PBI-David/Deneb-Showcase" }, "width": 800, "height": 500, "padding": {"left": 5, "right": 5, "top": 20, "bottom": 0}, "autosize": "none", "signals": [ {"name": "cx", "update": "width / 2"}, {"name": "cy", "update": "height / 2"}, { "name": "gravityX", "value": 0.2, "bind": {"input": "range", "min": 0, "max": 1} }, { "name": "gravityY", "value": 0.1, "bind": {"input": "range", "min": 0, "max": 1} } ], "data": [ { "name": "table", "values": [ {"category": "A", "amount": 0.28}, {"category": "B", "amount": 0.55}, {"category": "C", "amount": 0.43}, {"category": "D", "amount": 0.91}, {"category": "E", "amount": 0.81}, {"category": "F", "amount": 0.53}, {"category": "G", "amount": 0.19}, {"category": "H", "amount": 0.87}, {"category": "I", "amount": 0.28}, {"category": "J", "amount": 0.55}, {"category": "K", "amount": 0.43}, {"category": "L", "amount": 0.91}, {"category": "M", "amount": 0.81}, {"category": "N", "amount": 0.53}, {"category": "O", "amount": 0.19}, {"category": "P", "amount": 0.87} ] } ], "scales": [ { "name": "size", "domain": {"data": "table", "field": "amount"}, "range": [0, 10000] }, { "name": "color", "type": "ordinal", "domain": {"data": "table", "field": "category"}, "range": "ramp" } ], "marks": [ { "name": "nodes", "type": "symbol", "from": {"data": "table"}, "encode": { "enter": { "fill": {"scale": "color", "field": "category"}, "xfocus": {"signal": "cx"}, "yfocus": {"signal": "cy"} }, "update": { "size": {"signal": "datum.amount", "scale": "size"}, "stroke": {"value": "white"}, "strokeWidth": {"value": 1}, "tooltip": {"signal": "datum"} } }, "transform": [ { "type": "force", "iterations": 100, "static": false, "forces": [ { "force": "collide", "iterations": 2, "radius": {"expr": "sqrt(datum.size)/2"} }, {"force": "center", "x": {"signal": "cx"}, "y": {"signal": "cy"}}, {"force": "x", "x": "xfocus", "strength": {"signal": "gravityX"}}, {"force": "y", "y": "yfocus", "strength": {"signal": "gravityY"}} ] } ] }, { "type": "text", "from": {"data": "nodes"}, "encode": { "enter": { "align": {"value": "center"}, "baseline": {"value": "middle"}, "fontSize": {"value": 15}, "fontWeight": {"value": "bold"}, "fill": {"value": "white"}, "text": {"field": "datum.category"} }, "update": {"x": {"field": "x"}, "y": {"field": "y"}} } } ] } ``` --- # Dot Plot (Vega) ![Dot plot](https://diagrams.gocapable.com/images/att1228111934.svg) ``` { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A dot plot example depicting the distribution of animal sleep times.", "width": 300, "padding": 5, "signals": [ { "name": "step", "value": 0.65, "bind": {"input": "range", "min": 0.1, "max": 2, "step": 0.01} }, { "name": "offset", "value": "zero", "bind": {"input": "radio", "options": ["zero", "center"]} }, { "name": "smooth", "value": true, "bind": {"input": "checkbox"} }, {"name": "size", "update": "scale('x', step) - scale('x', 0)"}, {"name": "area", "update": "size * size"}, {"name": "ddh", "update": "(span(ddext) + 1) * size"}, {"name": "hdh", "update": "(span(hdext) + 1) * size"}, {"name": "height", "update": "max(ddh, hdh)"} ], "data": [ { "name": "points", "values": [ 6.3, 2.1, 9.1, 15.8, 5.2, 10.9, 8.3, 11.0, 3.2, 7.6, 6.3, 8.6, 6.6, 9.5, 4.8, 12.0, 3.3, 11.0, 4.7, 10.4, 7.4, 2.1, 7.7, 17.9, 6.1, 8.2, 8.4, 11.9, 10.8, 13.8, 14.3, 15.2, 10.0, 11.9, 6.5, 7.5, 10.6, 7.4, 8.4, 5.7, 4.9, 3.2, 8.1, 11.0, 4.9, 13.2, 9.7, 12.8 ], "transform": [ { "type": "dotbin", "field": "data", "smooth": {"signal": "smooth"}, "step": {"signal": "step"} }, { "type": "stack", "groupby": ["bin"], "offset": {"signal": "offset"}, "as": ["d0", "d1"] }, { "type": "extent", "field": "d1", "signal": "ddext" }, { "type": "extent", "field": "data", "signal": "ext" }, { "type": "bin", "field": "data", "step": {"signal": "step"}, "extent": {"signal": "ext"} }, { "type": "stack", "offset": {"signal": "offset"}, "groupby": ["bin0"] }, { "type": "extent", "field": "y0", "signal": "hdext" } ] } ], "scales": [ { "name": "x", "domain": [0, 20], "range": "width" }, { "name": "ddy", "domain": {"signal": "[0, ddh / size]"}, "range": {"signal": "[height, height - ddh]"} }, { "name": "hdy", "domain": {"signal": "[0, hdh / size]"}, "range": {"signal": "[height, height - hdh]"} } ], "marks": [ { "type": "group", "encode": { "update": { "width": {"signal": "width"}, "height": {"signal": "height"} } }, "axes": [ {"scale": "x", "orient": "bottom", "tickCount": 5, "title": "Density Dot Plot"} ], "marks": [ { "type": "symbol", "from": {"data": "points"}, "encode": { "update": { "x": {"scale": "x", "field": "bin"}, "y": {"scale": "ddy", "signal": "datum.d0 + 0.5"}, "size": {"signal": "area"}, "fill": {"value": "steelblue"} } } } ] }, { "type": "group", "encode": { "update": { "x": {"signal": "width + 10"}, "width": {"signal": "width"}, "height": {"signal": "height"} } }, "axes": [ {"scale": "x", "orient": "bottom", "tickCount": 5, "title": "Histogram Dot Plot"} ], "marks": [ { "type": "symbol", "from": {"data": "points"}, "encode": { "update": { "x": {"scale": "x", "signal": "(datum.bin0 + datum.bin1) / 2"}, "y": {"scale": "hdy", "signal": "datum.y0 + 0.5"}, "size": {"signal": "area"}, "fill": {"value": "steelblue"} } } } ] } ] } ``` --- # Pie Chart (Vega) ![Pie chart](https://diagrams.gocapable.com/images/att1227882561.svg) ``` { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A simple pie chart with embedded data.", "width": 400, "height": 400, "autosize": "none", "data": [ { "name": "table", "values": [ {"category": "A", "amount": 28}, {"category": "B", "amount": 55}, {"category": "C", "amount": 43}, {"category": "D", "amount": 91}, {"category": "E", "amount": 81}, {"category": "F", "amount": 53}, {"category": "G", "amount": 19}, {"category": "H", "amount": 87} ], "transform": [ { "type": "pie", "field": "amount" } ] } ], "scales": [ { "name": "color", "type": "ordinal", "domain": {"data": "table", "field": "category"}, "range": {"scheme": "category20"} } ], "marks": [ { "type": "arc", "from": {"data": "table"}, "encode": { "enter": { "fill": {"scale": "color", "field": "category"}, "x": {"signal": "width / 2"}, "y": {"signal": "height / 2"}, "startAngle": {"field": "startAngle"}, "endAngle": {"field": "endAngle"}, "innerRadius": {"value": 0}, "outerRadius": {"signal": "width / 2"} } } } ] } ``` --- # Radar Diagram (Vega) ![Radar Diagram](https://diagrams.gocapable.com/images/att1228374085.svg) ``` { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A radar chart example, showing multiple dimensions in a radial layout.", "width": 400, "height": 400, "padding": 40, "autosize": {"type": "none", "contains": "padding"}, "signals": [ {"name": "radius", "update": "width / 2"} ], "data": [ { "name": "table", "values": [ {"key": "key-0", "value": 19, "category": 0}, {"key": "key-1", "value": 22, "category": 0}, {"key": "key-2", "value": 14, "category": 0}, {"key": "key-3", "value": 38, "category": 0}, {"key": "key-4", "value": 23, "category": 0}, {"key": "key-5", "value": 5, "category": 0}, {"key": "key-6", "value": 27, "category": 0}, {"key": "key-0", "value": 13, "category": 1}, {"key": "key-1", "value": 12, "category": 1}, {"key": "key-2", "value": 42, "category": 1}, {"key": "key-3", "value": 13, "category": 1}, {"key": "key-4", "value": 6, "category": 1}, {"key": "key-5", "value": 15, "category": 1}, {"key": "key-6", "value": 8, "category": 1} ] }, { "name": "keys", "source": "table", "transform": [ { "type": "aggregate", "groupby": ["key"] } ] } ], "scales": [ { "name": "angular", "type": "point", "range": {"signal": "[-PI, PI]"}, "padding": 0.5, "domain": {"data": "table", "field": "key"} }, { "name": "radial", "type": "linear", "range": {"signal": "[0, radius]"}, "zero": true, "nice": false, "domain": {"data": "table", "field": "value"}, "domainMin": 0 }, { "name": "color", "type": "ordinal", "domain": {"data": "table", "field": "category"}, "range": {"scheme": "category10"} } ], "encode": { "enter": { "x": {"signal": "radius"}, "y": {"signal": "radius"} } }, "marks": [ { "type": "group", "name": "categories", "zindex": 1, "from": { "facet": {"data": "table", "name": "facet", "groupby": ["category"]} }, "marks": [ { "type": "line", "name": "category-line", "from": {"data": "facet"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"signal": "scale('radial', datum.value) * cos(scale('angular', datum.key))"}, "y": {"signal": "scale('radial', datum.value) * sin(scale('angular', datum.key))"}, "stroke": {"scale": "color", "field": "category"}, "strokeWidth": {"value": 1}, "fill": {"scale": "color", "field": "category"}, "fillOpacity": {"value": 0.1} } } }, { "type": "text", "name": "value-text", "from": {"data": "category-line"}, "encode": { "enter": { "x": {"signal": "datum.x"}, "y": {"signal": "datum.y"}, "text": {"signal": "datum.datum.value"}, "align": {"value": "center"}, "baseline": {"value": "middle"}, "fill": {"value": "black"} } } } ] }, { "type": "rule", "name": "radial-grid", "from": {"data": "keys"}, "zindex": 0, "encode": { "enter": { "x": {"value": 0}, "y": {"value": 0}, "x2": {"signal": "radius * cos(scale('angular', datum.key))"}, "y2": {"signal": "radius * sin(scale('angular', datum.key))"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } }, { "type": "text", "name": "key-label", "from": {"data": "keys"}, "zindex": 1, "encode": { "enter": { "x": {"signal": "(radius + 5) * cos(scale('angular', datum.key))"}, "y": {"signal": "(radius + 5) * sin(scale('angular', datum.key))"}, "text": {"field": "key"}, "align": [ { "test": "abs(scale('angular', datum.key)) > PI / 2", "value": "right" }, { "value": "left" } ], "baseline": [ { "test": "scale('angular', datum.key) > 0", "value": "top" }, { "test": "scale('angular', datum.key) == 0", "value": "middle" }, { "value": "bottom" } ], "fill": {"value": "black"}, "fontWeight": {"value": "bold"} } } }, { "type": "line", "name": "outer-line", "from": {"data": "radial-grid"}, "encode": { "enter": { "interpolate": {"value": "linear-closed"}, "x": {"field": "x2"}, "y": {"field": "y2"}, "stroke": {"value": "lightgray"}, "strokeWidth": {"value": 1} } } } ] } ``` --- # Scatter Plot (Vega) ![Scatter plot](https://diagrams.gocapable.com/images/att1228046388.svg) ``` { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A scatter plot showing correlation between two variables.", "width": 400, "height": 200, "padding": 5, "data": [ { "name": "table", "values": [ {"x": 1, "y": 28}, {"x": 2, "y": 55}, {"x": 3, "y": 43}, {"x": 4, "y": 91}, {"x": 5, "y": 81}, {"x": 6, "y": 53}, {"x": 7, "y": 19}, {"x": 8, "y": 87} ] } ], "scales": [ { "name": "xscale", "type": "linear", "domain": {"data": "table", "field": "x"}, "range": "width" }, { "name": "yscale", "type": "linear", "domain": {"data": "table", "field": "y"}, "nice": true, "range": "height" } ], "axes": [ {"orient": "bottom", "scale": "xscale"}, {"orient": "left", "scale": "yscale"} ], "marks": [ { "type": "symbol", "from": {"data": "table"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "x"}, "y": {"scale": "yscale", "field": "y"}, "size": {"value": 100}, "stroke": {"value": "steelblue"}, "fill": {"value": "transparent"} }, "update": { "fill": {"value": "steelblue"} }, "hover": { "fill": {"value": "red"} } } } ] } ``` --- # Stacked Bar Chart (Vega) ![Stacked bar chart](https://diagrams.gocapable.com/images/att1228013623.svg) ``` { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A stacked bar chart example.", "width": 400, "height": 200, "padding": 5, "data": [ { "name": "table", "values": [ {"category": "A", "type": "X", "amount": 28}, {"category": "A", "type": "Y", "amount": 55}, {"category": "B", "type": "X", "amount": 43}, {"category": "B", "type": "Y", "amount": 91}, {"category": "C", "type": "X", "amount": 81}, {"category": "C", "type": "Y", "amount": 53} ] } ], "scales": [ { "name": "xscale", "type": "band", "domain": {"data": "table", "field": "category"}, "range": "width", "padding": 0.05 }, { "name": "yscale", "type": "linear", "domain": {"data": "table", "field": "amount"}, "nice": true, "range": "height" }, { "name": "color", "type": "ordinal", "domain": {"data": "table", "field": "type"}, "range": {"scheme": "category10"} } ], "axes": [ {"orient": "bottom", "scale": "xscale"}, {"orient": "left", "scale": "yscale"} ], "marks": [ { "type": "rect", "from": {"data": "table"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "category"}, "width": {"scale": "xscale", "band": 1}, "y": {"scale": "yscale", "field": "amount"}, "y2": {"scale": "yscale", "value": 0}, "fill": {"scale": "color", "field": "type"} }, "update": { "fillOpacity": {"value": 1} }, "hover": { "fillOpacity": {"value": 0.5} } } } ] } ``` --- # Word Cloud (Vega) ![Word Cloud](https://diagrams.gocapable.com/images/att1228570689.svg) ``` { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A word cloud visualization depicting Vega research paper abstracts.", "width": 800, "height": 400, "padding": 0, "data": [ { "name": "table", "values": [ "Declarative visualization grammars can accelerate development, facilitate retargeting across platforms, and allow language-level optimizations. However, existing declarative visualization languages are primarily concerned with visual encoding, and rely on imperative event handlers for interactive behaviors. In response, we introduce a model of declarative interaction design for data visualizations. Adopting methods from reactive programming, we model low-level events as composable data streams from which we form higher-level semantic signals. Signals feed predicates and scale inversions, which allow us to generalize interactive selections at the level of item geometry (pixels) into interactive queries over the data domain. Production rules then use these queries to manipulate the visualization’s appearance. To facilitate reuse and sharing, these constructs can be encapsulated as named interactors: standalone, purely declarative specifications of interaction techniques. We assess our model’s feasibility and expressivity by instantiating it with extensions to the Vega visualization grammar. Through a diverse range of examples, we demonstrate coverage over an established taxonomy of visualization interaction techniques.", "We present Reactive Vega, a system architecture that provides the first robust and comprehensive treatment of declarative visual and interaction design for data visualization. Starting from a single declarative specification, Reactive Vega constructs a dataflow graph in which input data, scene graph elements, and interaction events are all treated as first-class streaming data sources. To support expressive interactive visualizations that may involve time-varying scalar, relational, or hierarchical data, Reactive Vega’s dataflow graph can dynamically re-write itself at runtime by extending or pruning branches in a data-driven fashion. We discuss both compile- and run-time optimizations applied within Reactive Vega, and share the results of benchmark studies that indicate superior interactive performance to both D3 and the original, non-reactive Vega system.", "We present Vega-Lite, a high-level grammar that enables rapid specification of interactive data visualizations. Vega-Lite combines a traditional grammar of graphics, providing visual encoding rules and a composition algebra for layered and multi-view displays, with a novel grammar of interaction. Users specify interactive semantics by composing selections. In Vega-Lite, a selection is an abstraction that defines input event processing, points of interest, and a predicate function for inclusion testing. Selections parameterize visual encodings by serving as input data, defining scale extents, or by driving conditional logic. The Vega-Lite compiler automatically synthesizes requisite data flow and event handling logic, which users can override for further customization. In contrast to existing reactive specifications, Vega-Lite selections decompose an interaction design into concise, enumerable semantic units. We evaluate Vega-Lite through a range of examples, demonstrating succinct specification of both customized interaction methods and common techniques such as panning, zooming, and linked selection." ], "transform": [ { "type": "countpattern", "field": "data", "case": "upper", "pattern": "[\\w']{3,}", "stopwords": "(i|me|my|myself|we|us|our|ours|ourselves|you|your|yours|yourself|yourselves|he|him|his|himself|she|her|hers|herself|it|its|itself|they|them|their|theirs|themselves|what|which|who|whom|whose|this|that|these|those|am|is|are|was|were|be|been|being|have|has|had|having|do|does|did|doing|will|would|should|can|could|ought|i'm|you're|he's|she's|it's|we're|they're|i've|you've|we've|they've|i'd|you'd|he'd|she'd|we'd|they'd|i'll|you'll|he'll|she'll|we'll|they'll|isn't|aren't|wasn't|weren't|hasn't|haven't|hadn't|doesn't|don't|didn't|won't|wouldn't|shan't|shouldn't|can't|cannot|couldn't|mustn't|let's|that's|who's|what's|here's|there's|when's|where's|why's|how's|a|an|the|and|but|if|or|because|as|until|while|of|at|by|for|with|about|against|between|into|through|during|before|after|above|below|to|from|up|upon|down|in|out|on|off|over|under|again|further|then|once|here|there|when|where|why|how|all|any|both|each|few|more|most|other|some|such|no|nor|not|only|own|same|so|than|too|very|say|says|said|shall)" }, { "type": "formula", "as": "angle", "expr": "[-45, 0, 45][~~(random() * 3)]" }, { "type": "formula", "as": "weight", "expr": "if(datum.text=='VEGA', 600, 300)" } ] } ], "scales": [ { "name": "color", "type": "ordinal", "domain": {"data": "table", "field": "text"}, "range": ["#d5a928", "#652c90", "#939597"] } ], "marks": [ { "type": "text", "from": {"data": "table"}, "encode": { "enter": { "text": {"field": "text"}, "align": {"value": "center"}, "baseline": {"value": "alphabetic"}, "fill": {"scale": "color", "field": "text"} }, "update": { "fillOpacity": {"value": 1} }, "hover": { "fillOpacity": {"value": 0.5} } }, "transform": [ { "type": "wordcloud", "size": [800, 400], "text": {"field": "text"}, "rotate": {"field": "datum.angle"}, "font": "Helvetica Neue, Arial", "fontSize": {"field": "datum.count"}, "fontWeight": {"field": "datum.weight"}, "fontSizeRange": [12, 56], "padding": 2 } ] } ] } ``` --- # Vega-Lite Vega-Lite is a higher-level, more concise grammar for creating visualizations. Where Vega asks you to specify everything (scales, axes, marks, layout, legend placement…), Vega-Lite lets you describe a chart in terms of encodings - mappings from data fields to visual channels - and fills in sensible defaults for the rest. --- [Area Chart (Vega-Lite)](https://diagrams.gocapable.com/diagrams/area-chart-vega-lite.html)[Box Diagram (Vega-Lite)](https://diagrams.gocapable.com/diagrams/box-diagram-vega-lite.html)[Donut Chart (Vega-Lite)](https://diagrams.gocapable.com/diagrams/donut-chart-vega-lite.html)[Heat Map (Vega-Lite)](https://diagrams.gocapable.com/diagrams/heat-map-vega-lite.html)[Scatter Chart (Vega-Lite)](https://diagrams.gocapable.com/diagrams/scatter-chart-vega-lite.html)[Sine/Cosine Plot (Vega-Lite)](https://diagrams.gocapable.com/diagrams/sine-cosine-plot-vega-lite.html)[Stacked Bar (Vega-Lite)](https://diagrams.gocapable.com/diagrams/stacked-bar-vega-lite.html) --- # Area Chart (Vega-Lite) ![Area Chart](https://diagrams.gocapable.com/images/att1227685971.svg) ``` { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "title": "Area and Line", "width": 300, "height": 160, "data": { "values": [ {"x": 0, "y": 4}, {"x": 1, "y": 6}, {"x": 2, "y": 7}, {"x": 3, "y": 8}, {"x": 4, "y": 5}, {"x": 5, "y": 9}, {"x": 6, "y": 11}, {"x": 7, "y": 10}, {"x": 8, "y": 12}, {"x": 9, "y": 14} ] }, "layer": [ { "mark": {"type": "area", "opacity": 0.4}, "encoding": { "x": {"field": "x", "type": "quantitative"}, "y": {"field": "y", "type": "quantitative"} } }, { "mark": "line", "encoding": { "x": {"field": "x", "type": "quantitative"}, "y": {"field": "y", "type": "quantitative"} } } ] } ``` --- # Box Diagram (Vega-Lite) ![Box-diagram](https://diagrams.gocapable.com/images/att1227620453.svg) ``` { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "title": "Body Mass of Penguin Species (g)", "data": { "values": [{ "Species": "Adelie", "lower": 2850, "q1": 3350, "median": 3700, "q3": 4000, "upper": 4775, "outliers": [] },{ "Species": "Chinstrap", "lower": 2700, "q1": 3487.5, "median": 3700, "q3": 3950, "upper": 4800, "outliers": [2700,4800] },{ "Species": "Gentoo", "lower": 3950, "q1": 4700, "median": 5000, "q3": 5500, "upper": 6300, "outliers": [] }] }, "encoding": {"y": {"field": "Species", "type": "nominal", "title": null}}, "layer": [ { "mark": {"type": "rule"}, "encoding": { "x": {"field": "lower", "type": "quantitative","scale": {"zero": false}, "title": null}, "x2": {"field": "upper"} } }, { "mark": {"type": "bar", "size": 14}, "encoding": { "x": {"field": "q1", "type": "quantitative"}, "x2": {"field": "q3"}, "color": {"field": "Species", "type": "nominal", "legend": null} } }, { "mark": {"type": "tick", "color": "white", "size": 14}, "encoding": { "x": {"field": "median", "type": "quantitative"} } }, { "transform": [{"flatten": ["outliers"]}], "mark": {"type": "point", "style": "boxplot-outliers"}, "encoding": { "x": {"field": "outliers", "type": "quantitative"} } } ] } ``` --- # Donut Chart (Vega-Lite) ![Pie / Donut](https://diagrams.gocapable.com/images/att1227980878.svg) ``` { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "title": "Pie Chart", "width": 200, "height": 200, "data": { "values": [ {"category": "A", "value": 28}, {"category": "B", "value": 55}, {"category": "C", "value": 43}, {"category": "D", "value": 34} ] }, "mark": {"type": "arc", "innerRadius": 40}, "encoding": { "theta": {"field": "value", "type": "quantitative"}, "color": {"field": "category", "type": "nominal"} } } ``` --- # Heat Map (Vega-Lite) ![Heatmap](https://diagrams.gocapable.com/images/att1228111946.svg) ``` { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": { "values": [ {"actual": "A", "predicted": "A", "count": 13}, {"actual": "A", "predicted": "B", "count": 0}, {"actual": "A", "predicted": "C", "count": 0}, {"actual": "B", "predicted": "A", "count": 0}, {"actual": "B", "predicted": "B", "count": 10}, {"actual": "B", "predicted": "C", "count": 6}, {"actual": "C", "predicted": "A", "count": 0}, {"actual": "C", "predicted": "B", "count": 0}, {"actual": "C", "predicted": "C", "count": 9} ] }, "params": [{"name": "highlight", "select": "point"}], "mark": {"type": "rect", "strokeWidth": 2}, "encoding": { "y": { "field": "actual", "type": "nominal" }, "x": { "field": "predicted", "type": "nominal" }, "fill": { "field": "count", "type": "quantitative" }, "stroke": { "condition": { "param": "highlight", "empty": false, "value": "black" }, "value": null }, "opacity": { "condition": {"param": "highlight", "value": 1}, "value": 0.5 }, "order": {"condition": {"param": "highlight", "value": 1}, "value": 0} }, "config": { "scale": { "bandPaddingInner": 0, "bandPaddingOuter": 0 }, "view": {"step": 40}, "range": { "ramp": { "scheme": "yellowgreenblue" } }, "axis": { "domain": false } } } ``` --- # Scatter Chart (Vega-Lite) ![Scatter with Size](https://diagrams.gocapable.com/images/att1228701741.svg) ``` { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "title": "Scatter with Size and Shape", "width": 300, "height": 200, "data": { "values": [ {"x": 1, "y": 28, "size": 100, "cat": "A"}, {"x": 2, "y": 55, "size": 200, "cat": "B"}, {"x": 3, "y": 43, "size": 150, "cat": "A"}, {"x": 4, "y": 91, "size": 300, "cat": "B"}, {"x": 5, "y": 81, "size": 120, "cat": "A"}, {"x": 6, "y": 53, "size": 250, "cat": "B"} ] }, "mark": "point", "encoding": { "x": {"field": "x", "type": "quantitative"}, "y": {"field": "y", "type": "quantitative"}, "size": {"field": "size", "type": "quantitative"}, "shape": {"field": "cat", "type": "nominal"}, "color": {"field": "cat", "type": "nominal"} } } ``` --- # Sine/Cosine Plot (Vega-Lite) ![Sine/Cosine plot](https://diagrams.gocapable.com/images/att1227620447.svg) ``` { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "description": "Plots two functions using a generated sequence.", "width": 300, "height": 150, "data": { "sequence": { "start": 0, "stop": 12.7, "step": 0.1, "as": "x" } }, "transform": [ { "calculate": "sin(datum.x)", "as": "sin(x)" }, { "calculate": "cos(datum.x)", "as": "cos(x)" }, { "fold": ["sin(x)", "cos(x)"] } ], "mark": "line", "encoding": { "x": { "type": "quantitative", "field": "x" }, "y": { "field": "value", "type": "quantitative" }, "color": { "field": "key", "type": "nominal", "title": null } } } ``` --- # Stacked Bar (Vega-Lite) ![Stacked Bar](https://diagrams.gocapable.com/images/att1227685961.svg) ``` { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "title": "Stacked Bar Chart", "width": 300, "height": 180, "data": { "values": [ {"region": "A", "category": "X", "value": 28}, {"region": "A", "category": "Y", "value": 55}, {"region": "B", "category": "X", "value": 43}, {"region": "B", "category": "Y", "value": 91}, {"region": "C", "category": "X", "value": 81}, {"region": "C", "category": "Y", "value": 53} ] }, "mark": "bar", "encoding": { "x": {"field": "region", "type": "nominal", "title": "Region"}, "y": {"field": "value", "type": "quantitative", "title": "Value"}, "color": {"field": "category", "type": "nominal", "title": "Category"} } } ``` --- # WaveDrom WaveDrom lets you describe digital signals (clocks, buses, control lines, etc.) in a compact JSON‑like text format It's great for documenting: * Bus protocols (SPI, I²C, AXI, etc.) * Handshake sequences (req/ack) * Clock vs data alignment * Setup/hold and pulse sequences --- [Signal Timing (WaveDrom)](https://diagrams.gocapable.com/diagrams/signal-timing-wavedrom.html) --- # Signal Timing (WaveDrom) ![Signal Timing](https://diagrams.gocapable.com/images/att1228701753.svg) ``` { "signal": [ { "name": "clk", "wave": "p.....|..." }, { "name": "Data", "wave": "x.345x|=.x", "data": ["A", "B", "C", "D"] }, { "name": "Req", "wave": "0.1..0|1.0" } ]} ``` --- # WireViz A bill of materials (BOM) for the connectors, cables, and accessories. You describe your connectors, cables, and how the pins are wired using a **YAML text file**. --- [Connector and Cable (WireViz)](https://diagrams.gocapable.com/diagrams/connector-and-cable-wireviz.html) --- # Connector and Cable (WireViz) ![Connector and Cable](https://diagrams.gocapable.com/images/att1227784291.svg) ``` connectors: X1: type: D-Sub subtype: female pinlabels: [DCD, RX, TX, DTR, GND, DSR, RTS, CTS, RI] X2: type: Molex KK 254 subtype: female pinlabels: [GND, RX, TX] cables: W1: gauge: 0.25 mm2 length: 0.2 color_code: DIN wirecount: 3 shield: true connections: - - X1: [5,2,3] - W1: [1,2,3] - X2: [1,3,2] - - X1: 5 - W1: s ``` --- # Venn Diagram (Draw.io) ![Venn Diagram](https://diagrams.gocapable.com/images/att1073087048.png) --- # Process Diagram (Draw.io) ![Process Diagram](https://diagrams.gocapable.com/images/att1073152618.png) --- # AWS Architecture (Draw.io) ![AWS Diagram](https://diagrams.gocapable.com/images/att1072203467.png) --- # Sequence Diagram (Draw.io) ![Sequence](https://diagrams.gocapable.com/images/att1073054322.png) --- # External Images (Draw.io) ![External Images](https://diagrams.gocapable.com/images/att1232109569.png)