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

Editor (MySQL)Foreign Keys editor (MySQL)Functions editor (MySQL)Indexes, Primary Keys, and Unique Keys editors (MySQL)Tables editor (MySQL)Users editor (MySQL)Oracle Object EditorsCheck Constraints Editor (Oracle)Clusters Editor (Oracle)Database Links Editor (Oracle)Directories Editor (Oracle)Foreign Keys Editor (Oracle)Functions Editor (Oracle)Indexes Editor (Oracle)Job Queue Editor (Oracle)Jobs Editor (Oracle)Libraries Editor (Oracle)Materialized Views Editor (Oracle)Materialized View Logs Editor (Oracle)Outlines Editor (Oracle)Package Bodies Editor (Oracle)Packages Editor (Oracle)Primary Keys Editor (Oracle)Procedures Editor (Oracle)Programs Editor (Oracle)Profiles Editor (Oracle)Redo Log Groups Editor (Oracle)Roles Editor (Oracle)Rollback Segments Editor (Oracle)Schedules Editor (Oracle)Sequences Editor (Oracle)Synonyms Editor (Oracle)Tables Editor (Oracle)Tablespaces Editor (Oracle)Triggers Editor (Oracle)Type Bodies Editor (Oracle)Types Editor (Oracle)Unique Keys Editor (Oracle)Users Editor (Oracle)Views Editor (Oracle)Partitioning Oracle indexes, primary keys, and unique keysPostgreSQL Object EditorsCheck Constraints Editor (PostgreSQL)Domains Editor (PostgreSQL)Exclusion Constraints, Primary Keys, or Unique Keys Editors (PostgreSQL)Foreign Keys Editor (PostgreSQL)Functions Editor (PostgreSQL)Indexes Editor (PostgreSQL)Roles Editor (PostgreSQL)Rules Editor (PostgreSQL)Schemas Editor (PostgreSQL)Tables Editor (PostgreSQL)Tablespaces Editor (PostgreSQL)Triggers Editor (PostgreSQL)Types Editor (PostgreSQL)Views Editor (PostgreSQL)Sybase ASE Object EditorsAliases Editor (Sybase ASE)Check Constraints Editor (Sybase ASE)Databases Editor (Sybase ASE)Defaults Editor (Sybase ASE)Extended Procedures Editor (Sybase ASE)Foreign Keys Editor (Sybase ASE)Functions Editor (Sybase ASE)Groups Editor (Sybase ASE)Indexes Editor (Sybase ASE)Logins Editor (Sybase ASE)Primary Keys Editor (Sybase ASE)Procedures Editor (Sybase ASE)Rules Editor (Sybase ASE)Segments Editor (Sybase ASE)Tables Editor (Sybase ASE)Triggers Editor (Sybase ASE)Unique Keys Editor (Sybase ASE)User Datatypes Editor (Sybase ASE)User Messages Editor (Sybase ASE)Users Editor (Sybase ASE)Views Editor (Sybase ASE)MySQL object wizardsDatabases wizard (MySQL)Foreign Keys wizard (MySQL)Functions wizard (MySQL)Indexes, Primary Keys, or Unique Keys wizard (MySQL)Tables wizard (MySQL)Users wizard (MySQL)Object actionsOverview of object actions/operations executionInitiating an object operationUsing object operation wizardsAvailable object actions by DBMSAdd or Modify Check ConstraintAdd/Modify Login TriggerAdd Private KeyAllocate ExtentAnalyzeAnalyze TablesAttach DatabaseBackup CertificateBind PackageBind To Temporary DatabaseBuildBuild QueryChange Access StatusChange CategoryChange PasswordChange StatusCheck TablesCheckpointChecksum TablesCoalesceCompileConvert TablesCopy Object NamesCopy SchemaCreate AliasCreate CloneCreate Insert StatementsCreate LikeCreate SynonymCreate ViewDBCCDeallocate Unused SpaceDelete StatisticsDescribeDetach DatabaseDisable IndexDisable JobDisable KeysDisable/Enable TriggersDropDrop Automatic Storage Path(s)Drop By CategoryDrop CloneDrop JavaDrop Login TriggerDrop Materialized Query TableDrop UnusedEnable Job (Job Queue)Enable KeysEnable Recycle BinEnable/Disable (Oracle Jobs)Estimate SizeExchange Data With CloneExecuteExtractExtract Data as XMLFlashback Recycle Bin EntryFlashback TableFlush CacheFlush TablesFree (Packages)Free PlanGenerate Package/Procedure/StatementHide TextImport Data From FileLoad JavaLockLower High Water MarkMove LogMove TableNext Used FilegroupObject PropertiesOptimize TablesPlacePopulation statusPurge Recycle BinPurge

Basic uses & Palette (swatch) Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor Adding color pickers dynamically (AJAX) Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor onChange and onInput events Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor Submitting form with transparent colors #rrggbbaa and rgba() Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor Presets and Custom theme Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor Customizing defaults Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor Color preview Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor Custom valueElement and previewElement Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor Adjusting position Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor HSV / HVS mode Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor Instantiating new Color Pickers Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor Getting current color Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor Setting current color Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor Generate a random color Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor Optional value & Formatting Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor Showing / Hiding using API Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor The Close button Edit sourceDownloadFullscreen editor PreviewDownloadFullscreen editor