Wavedrom editor

Different aspects of rendering.hscaleconfig:{hscale:#} property controls the horizontal scale of the diagram. User can put any integer number greater than 0.{ signal: [ { name: "clk", wave: "p...." }, { name: "Data", wave: "x345x", data: ["head", "body", "tail"] }, { name: "Request", wave: "01..0" } ], config: { hscale: 1 }}hscale = 1 (default)Edit Me >>hscale = 2Edit Me >>hscale = 3Edit Me >>skinconfig:{skin:'...'} property can be used to select the WaveDrom skin.The property works only inside the first timing diagram on the page.WaveDrom Editor includes two standard skins: 'default' and 'narrow'head/foothead:{...} and foot:{...} properties define the content of the area above and below the timing diagram.tick-adds timeline labels aligned to vertical markers.tock-adds timeline labels between the vertical markers.text-adds title / caption text.every-render ticks and tocks only once every N cycle{signal: [ {name:'clk', wave: 'p....' }, {name:'Data', wave: 'x345x', data: 'a b c' }, {name:'Request', wave: '01..0' }], head:{ text:'WaveDrom example', tick:0, every:2 }, foot:{ text:'Figure 100', tock:9 },}Edit Me >>head/foot text has all properties of SVG text. Standard SVGtspan attributes can be used to modify default properties of text. JsonML markup language used to represent SVG text content. Several predefined styles can be used and intermixed:h1h2h3h4h5h6 -- predefined font sizes.mutedwarningerrorinfosuccess -- font color styles.Other SVG tspan attributes can be used in freestyle as shown below.{signal: [ {name:'clk', wave: 'p.....PPPPp....' }, {name:'dat', wave: 'x....2345x.....', data: 'a b c d' }, {name:'req', wave: '0....1...0.....' }],head: {text: ['tspan', ['tspan', {class:'error h1'}, 'error '], ['tspan', {class:'warning h2'}, 'warning '], ['tspan', {class:'info h3'}, 'info '], ['tspan', {class:'success h4'}, 'success '], ['tspan', {class:'muted h5'}, 'muted '], ['tspan', {class:'h6'}, 'h6 '], 'default ', ['tspan', {fill:'pink', 'font-weight':'bold', 'font-style':'italic'}, 'pink-bold-italic'] ]},foot: {text: ['tspan', 'E=mc', ['tspan', {dy:'-5'}, '2'], ['tspan', {dy: '5'}, '. '], ['tspan', {'font-size':'25'}, 'B '], ['tspan', {'text-decoration':'overline'},'over '], ['tspan', {'text-decoration':'underline'},'under '], ['tspan', {'baseline-shift':'sub'}, 'sub '], ['tspan', {'baseline-shift':'super'}, 'super '] ],tock:-5}}Edit Me >>Step 8. ArrowsSplines ~ -~ ~> -~> ~->{ signal: [ { name: 'A', wave: '01........0....', node: '.a........j' }, { name: 'B', wave: '0.1.......0.1..', node: '..b.......i' }, { name: 'C', wave: '0..1....0...1..', node: '...c....h..' }, { name: 'D', wave: '0...1..0.....1.', node: '....d..g...' }, { name: 'E', wave: '0....10.......1', node: '.....ef....' } ], edge: [ 'a~b t1', 'c-~a t2', 'c-~>d time 3', 'd~-e', 'e~>f', 'f->g', 'g-~>h', 'h~>i some text', 'h~->j' ]}Edit Me >>Sharp lines - -| -|- -> -|> -|-> |-> +{ signal: [ { name: 'A', wave: '01..0..', node: '.a..e..' }, { name: 'B', wave: '0.1..0.', node: '..b..d.', phase:0.5 }, { name: 'C', wave: '0..1..0', node: '...c..f' }, { node: '...g..h' }, { node: '...I..J', phase:0.5 }, { name: 'D', wave: '0..1..0', phase:0.5 } ], edge: [ 'b-|a t1', 'a-|c t2', 'b-|-c t3', 'c-|->e t4', 'e-|>f more text', 'e|->d t6', 'c-g', 'f-h', 'gh 3 ms', 'I+J 5

Example of why it is not my preference.But I am typically not targeting web display.Introduction to Haskell Diagrams3 projects|dev.to|9 Aug 2024Use a high-level language like Plant UML, D2, Graphviz which are good for the purpose they are designed for, but not for generic purpose diagramming.Devs need system design tools, not diagramming toolsI feel like gets close to what I want by being able to make diagrams with code, but for system design what I really want is to be able to have diagrams generated directly from the code itself, maybe with some extra comments/annotations that help it along.Does anything like that exist already?What are some alternatives?When comparing wavedrom and plantuml you can also consider the following projects:Mermaid- Edit, preview and share mermaid charts/diagrams. New implementation of the live editor.mermaid- Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdownbutterfly- 🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件)pandoc- Universal markup converterdraw.io- draw.io is a JavaScript, client-side editor for general diagramming.CodeRabbit: AI Code Reviews for DevelopersRevolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.Do not miss the trending JavaScript projects with our weekly report!

WaveDrom is a JavaScript application.WaveJSON is a format that describes Digital Timing Diagrams.WaveDrom renders the diagrams directly inside the browser.Element "signal" is an array of WaveLanes.Each WaveLane has two mandatory fields: "name" and "wave".Step 1. The SignalLets start with a quick example.Following code will create 1-bit signal named "Alfa" that changes its state over time.{ signal: [{ name: "Alfa", wave: "01.zx=ud.23.456789" }] }Every character in the "wave" string represents a single time period.Symbol "." extends previous state for one more period.Here is how it looks:Edit Me >>Step 2. Adding ClockDigital clock is a special type of signal.It changes twice per time period and can have positive or negative polarity.It also can have an optional marker on the working edge.The clock's blocks can be mixed with other signal states to create the clock gating effects.Here is the code:{ signal: [ { name: "pclk", wave: 'p.......' }, { name: "Pclk", wave: 'P.......' }, { name: "nclk", wave: 'n.......' }, { name: "Nclk", wave: 'N.......' }, {}, { name: 'clk0', wave: 'phnlPHNL' }, { name: 'clk1', wave: 'xhlhLHl.' }, { name: 'clk2', wave: 'hpHplnLn' }, { name: 'clk3', wave: 'nhNhplPl' }, { name: 'clk4', wave: 'xlh.L.Hx' },]}and the rendered diagram:Edit Me >>Step 3. Putting all togetherTypical timing diagram would have the clock and signals (wires).Multi-bit signals will try to grab the labels from "data" array.{ signal: [ { name: "clk", wave: "P......" }, { name: "bus", wave: "x.==.=x", data: ["head", "body", "tail", "data"] }, { name: "wire", wave: "0.1..0." }]}Edit Me >>Step 4. Spacers and Gaps{ signal: [ { name: "clk", wave: "p.....|..." }, { name: "Data", wave: "x.345x|=.x", data: ["head", "body", "tail", "data"] }, { name: "Request", wave: "0.1..0|1.0" }, {}, { name: "Acknowledge", wave: "1.....|01." }]}Edit Me >>Step 5. The groupsWaveLanes can be united in named groups that are represented in form of arrays.['group name', {...}, {...}, ...]The first entry of array is the group's name.The groups can be nested.{ signal: [ { name: 'clk', wave: 'p..Pp..P'}, ['Master', ['ctrl', {name: 'write', wave: '01.0....'}, {name: 'read', wave: '0...1..0'} ], { name: 'addr', wave: 'x3.x4..x', data: 'A1 A2'}, { name: 'wdata', wave: 'x3.x....', data: 'D1' }, ], {}, ['Slave', ['ctrl', {name: 'ack', wave: 'x01x0.1x'}, ], { name: 'rdata', wave: 'x.....4x', data: 'Q2'}, ]]}Edit Me >>Step 6. Period and Phase"period" and "phase" parameters can be used to adjust each WaveLane.DDR Read transaction{ signal: [ { name: "CK", wave: "P.......", period: 2 }, { name: "CMD", wave: "x.3x=x4x=x=x=x=x", data: "RAS NOP CAS NOP NOP NOP NOP", phase: 0.5 }, { name: "ADDR", wave: "x.=x..=x........", data: "ROW COL", phase: 0.5 }, { name: "DQS", wave: "z.......0.1010z." }, { name: "DQ", wave: "z.........5555z.", data: "D0 D1 D2 D3" }]}Edit Me >>Step 7.The config{} propertyThe config:{...} property controls

Wavedrom:ocean: Digital timing diagram rendering engine (by wavedrom)plantumlGenerate diagrams from textual description (by plantuml)CodeRabbit: AI Code Reviews for DevelopersRevolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.wavedromplantumlProject24 Mentions1343,102 Stars11,1571.9% Growth2.2%2.6 Activity9.7about 2 months agoLatest Commit5 days agoJavaScript LanguageJavaMIT LicenseLicenseGNU General Public License v3.0 or laterThe number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.Stars - the number of stars that a project has on GitHub.Growth - month over month growth in stars.Activity is a relative number indicating how actively a project is being developed.Recent commits have higher weight than older ones.For example, an activity of 9.0 indicates that a project is amongst the top 10%of the most actively developed projects that we are tracking.plantuml Posts with mentions or reviews of plantuml. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2025-03-06.Codez votre PPT avec Slidev !6 projects|dev.to|6 Mar 2025UML Class Diagrams1 project|dev.to|23 Feb 2025PlantUML (Text-based UML diagrams)Common Mistakes in Architecture Diagrams (2020)I have to confess I am guilty of this — I used to just draw some unstructured circles and arrows on a whiteboard and call it enough.Lately I've been trying to work my way through lots of different diagram types from and it does help to wrap my mind around the existing options.An example of Consumer-Driven Development1 project|dev.to|7 Jan 2025The diagram is drawn using PlantUML.Les péchés capitaux du Dossier d'Architecture Technique2 projects|dev.to|5 Dec 2024Exploitez les solutions de Diagram-as-Code (Mermaid, PlantUML)LLM + Mermaid: How Modern Teams Create UML Diagrams Without Lucidchart3 projects|dev.to|18 Nov 2024Today, tools like Mermaid and PlantUML have taken center stage, thanks to their ability to generate diagrams with text-based commands. Even better, AI-powered assistants like Claude, ChatGPT, and GitHub Copilot have made generating diagrams even easier. These tools work directly within a developer's environment, creating diagrams that are version-controlled and integrated seamlessly into workflows.plantuml VS vizdom - a user suggested alternative2 projects|1 Sep 2024Blockdiag – simple diagram images generator – blockdiag 1.0 documentationWhile inactive blockdiag was small and nice for automatically annotating documentation.As you can see it hasn't been maintained for a few years. is great because dot file are simple and easy to read and trivial to add to a build chain. complex diagrams, I find good old PlantUML diagrams more useful if not as initially pretty as mermaid. Plus it will output archimate without having to touch that UI really it is horses for courses.Looking at the mermaid on mobile with a dark theme is pretty painful at least right now as an