(一)WaveDrom 数字时序图渲染引擎
专栏:WaveDrom
下一篇:(二)WaveDrom Editor使用教程
WaveDrom 数字时序图渲染引擎
1. WaveDrom介绍
WaveDrom官网 https://wavedrom.com/
WaveDrom是一个免费开源的在线数字时序图渲染引擎。它可以使用JavaScript, HTML5和SVG来将时序图的WaveJSON描述转成SVG矢量图形,从而进行显示。WaveDrom可以嵌入到任何网页中。
1.1 WaveDrom功能
1.1.1 绘制数字时序图
1.1.2 绘制寄存器图
1.1.3 绘制逻辑电路图
WaveDrom编辑器可在浏览器中运行,也可以安装在系统上。渲染引擎可以嵌入到任何网页中。
2. WaveDrom的使用
WaveDrom 在线编辑器 https://wavedrom.com/editor.html
WaveDrom官网 https://wavedrom.com/
WaveJSON https://github.com/wavedrom/schema/blob/master/WaveJSON.md
WaveDrom可以在线编辑也可以下载安装,可以在官网首页找到这两个入口。
- 在线编辑方式,版本较新,但需要联网。
- 下载安装方式,版本较官网旧一些,无需联网即可使用。
在编辑器中输入 WaveJSON 格式的数字时序图描述,即可实时渲染出相应的数字时序图。
WaveJSON 格式是十分简单的,主要需要记忆的是各个符号所对应的波形。
3. WaveDrom文档
3.1 WaveDrom官网
WaveDrom官网: https://wavedrom.com/
Github: https://github.com/wavedrom/wavedrom
进入官网,可以看到如下界面。
3.1.1 WaveDrom在线编辑器(WaveDrom Editor)
官网首页上方的 Editor 可进入WaveDrom的在线编辑器。
WaveDrom在线编辑器显示如下图,上方是WaveJSON格式的数字时序图描述文本,下方是对应的数字时序图。
可以看到,绘制出来的图形是十分美观的,而且WaveDrom语法简单,用不同的字符表示不同的波形,十分容易学习
3.1.2 官方教程1(数字时序图)
WaveDrom Tutorial https://wavedrom.com/tutorial.html
官网首页上方的 Tutorial 可进入WaveDrom的官网教程。
里面包含多个示例,可以很好地对WaveDrom进行学习。
3.1.3 官方教程2(逻辑电路图)
WaveDrom Tutorial2(schematic) https://wavedrom.com/tutorial2.html
官网首页下方的 Tutorial2(schematic) 可进入WaveDrom的逻辑电路图绘制官方教程。
教程里面讲解了逻辑电路图的绘制示例。
3.1.3 SNUG2016 Pager
从官网首页下方的 SNUG2016 Pager 可以进入。
里面包含了一些对WaveDrom的描述,可以了解地更深入一些。
3.2 WaveDrom Github主页
WaveDrom Github https://github.com/wavedrom/wavedrom
3.3 Obserable WaveDrom
Observable https://observablehq.com/collection/@drom/wavedrom
作者在Obserable社区上发布的一些博客
专栏:WaveDrom
下一篇:(二)WaveDrom Editor使用教程
(一)WaveDrom 数字时序图渲染引擎相关推荐
- 分享一款绘制时序图的实用小工具
转自 | 果果小师弟 今天分享一款实用小工具:WaveDrom,它是一个免费开源的在线数字时序图渲染引擎.它可以使用JavaScript, HTML5和SVG来将时序图的WaveJSON描述转成SVG ...
- Verilog:【7】超详细WaveDrom教程,时序图绘制利器,看这一篇就够了。
碎碎念: 没想到上一篇发出去,前几个小时竟然基本没人看,是我写得太晦涩了吗,这篇介绍个简单但是相当好用的软件WaveDrom,可以非常方便的绘制时序图,简直是数字人的福音啦! 本文将从安装开始,详细介 ...
- 数字孪生场景、代码即开即用 | 图观引擎 超详细功能范例演示
数字孪生已经从一项前沿技术,演变成为各行各业数字化转型的必选项. 过去想要构建数字孪生应用,要面对视觉设计.三维底座构建.代码开发.数据对接.部署联调等一系列复杂工作.不仅要了解复杂的数学基础知识.底 ...
- [转][osg]osg渲染引擎框架图,流程图(根据《最长一帧》整理)
转自:http://m.blog.csdn.net/article/details?id=49679731 本文参考<<osg最长一帧>>, <<OpenScene ...
- 葛兰岱尔数字孪生GIS/BIM/3D融合渲染引擎功能更新(一)
近期,葛兰岱尔数字孪生GIS/BIM/3D融合渲染引擎更新了一部分功能: 1.开发出了bentley的导出插件,同时实现了对bentley的管线类构件进行了参数化处理,如下图所示: 2.实现了针对re ...
- PlantUML权威教程-时序图
文章目录 PlantUML 时序图 简单的时序图 participant改变先后顺序 使用as重命名参与者 order改变参与者的顺序 使用非字母符号 修改箭头样式 修改箭头的箭头的颜色 对消息序列进 ...
- 超详解析Flutter渲染引擎|业务想创新,不了解底层原理怎么行?
简介:Flutter 作为一个跨平台的应用框架,诞生之后,就被高度关注.它通过自绘 UI ,解决了之前 RN 和 weex 方案难以解决的多端一致性问题.Dart AOT 和精减的渲染管线,相对与 J ...
- html edge浏览器 图片,浏览器时序图及 Microsoft Edge 构架
本文又是我的作业,完成思路借鉴了 版权说明. 作业要求针对一款典型浏览器,绘制浏览器处理时序图对用户界面进行操作(如拖拽窗口) 带有 JavaScript 脚本 HTML 文档 查阅资料,绘制 Edg ...
- Java通过JfreeChart生成转Base64图片字符串(饼图、折线图、柱状图、折线图-多条、3D柱状图、气泡图、时序图、曲线图、区域图、分布图、联合分类图、双X轴图、K线图、柱状图-横向等图)
工具类 CreatLineChart.java package DrawLine;import java.awt.BasicStroke; import java.awt.Color; import ...
最新文章
- Echarts 动态获取数据进行图表的展示
- java 对象传递给方法_java – 将对象值传递给方法
- Markdown 语法说明 (简体中文版)
- android系统里面的mic是哪个app_苹果记事app哪个好用?这款便签可以跨系统使用...
- CSS实现自适应不同大小屏幕的背景大图
- 小程序开发学习(5)---实现天气预报小程序
- 亿些模板【字符串+其他】
- boost学习之boost::lock_guardT与boost::unique_lockT的区别
- 时点数列序时平均数_时点数列序时平均数计算方法研究
- springboot生成包含特定数字_关于Spring Boot 这可能是全网最好的知识点总结
- 安装虚拟机vmware8.0.4版本
- 电路布线问题的动态规划实现(java)
- 反编译软件JD-GUI
- hbuilderx为什么打不开_windows系统,HBuilderX无法启动、点击无反应、或启动报错的解决方案...
- Oracle官网 JDK下载 注册登录公共账号和密码
- 基于PHP的简易教务管理系统
- 【Cocos Creator实战教程(6)】——镜头跟随
- [zz]QuickTime电影(Movie)
- 计算机桌面任务栏怎样显示输入法,计算机中任务栏的输入法无法切换怎么处理...
- HDU 1808 Halloween treats (鸽巢原理)(数学)
热门文章
- 攻防世界杂项(misc)--新手练习区(详解十二道题完结,附件做题过程中使用到的各种工具和网站)
- 华为云对象存储OBS,助力企业降本增效
- 统计图表之桑基图 sankey diagram
- 连接高匿代理接口调用并测试是否可用
- vulnhub靶机-DC7-Writeup
- 苹果电脑传android文件怎么打开,怎么用苹果电脑给android手机传文件
- 基于TCP协议的游戏代理接口测试工具<一>:设计初衷与工具构想
- 页面中播放fla文件
- 悲观锁和乐观锁的理解以及实现方式-学习笔记
- 少吃一顿就能减轻新冠重症风险?最新医学研究:定期禁食可降低死亡风险,未来可用作新冠补充治疗...