“语法解析”和“词法解析”是计算机理解查询语句的重要一环。而词法和语法的解析依赖于一定的文法规则，有诸多网站可以可视化文法规则，但是对于根据文法规则生成的语法树进行可视化的文章却比较少。对文法规则生成的语法树进行可视化，可以降低查询语言的理解成本。本文以华为图引擎使用的cypher查询语言为例，将查询语句的解析结果（语法树）在jupyterLab上可视化。案例中使用的工具不仅可以可视化cypher语言的语法树结构，对其他antlr生成的抽象语法树同样适用。详情参见：cid:link_1AI Gallery案例地址为:cid:link_0

量子线路图及测量的svg格式我们可以在MindQuantum中搭建各种各样的量子线路，其次，我们还可以将搭建好的量子线路打印出来。例如，我们运行如下代码来搭建量子线路：cir = Circuit() cir += H.on(0) cir += X.on(1, 0) cir += UN(Measure(), 2) cirq0: ──H────●────M(q0)── │ q1: ───────X────M(q1)──从运行的结果可以看到，我们成功搭建了2个量子比特的量子线路。在最新的版本中，可以输出量子线路的svg格式，执行如下代码即可：cir.svg()得到的运行结果如下图所示同时，还能将其保存成文件，执行如下代码：circ.svg().to_file("filename.svg")此外，MindQuantum中还可以对量子线路进行测量操作，执行如下代码：from mindquantum.simulator import Simulator sim = Simulator('projectq', 2) result = sim.sampling(cir, shots=1000, seed=40) result shots: 1000 Keys: q1 q0│0.00 0.125 0.251 0.376 0.501 0.626 ───────────┼───────────┴───────────┴───────────┴───────────┴───────────┴ 00│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ 11│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ │ {'00': 501, '11': 499}从运行的结果可以看到，对量子线路进行了1000次的采样，结果展示：“00”的采样次数为501次，“11”的采样次数为499次。在最新的版本中，可以输出测量结果的svg格式，执行如下代码即可：result.svg() 得到的运行结果如下图所示同理，也能将其保存成文件，执行如下代码：result.svg().to_file("filename1.svg")【注意】目前svg格式只能在Jupyter Notebook展示。上述就是MindQuantum中量子线路图及测量的svg格式的介绍。赶紧动手体验一下MindQuantum最新的功能吧！若想查询更多关于MindQuantum的API，请点击：https://mindspore.cn/mindquantum/。

SVG 全称 Scalable Vector Graphics , 可缩放矢量图 ; 矢量图不会随着图像缩放 , 出现图像质量降低的情况 ;png , jpeg 等位图会随着图像缩放 , 出现模糊的情况 ;Android 中使用 SVG 矢量图 , 能极大的减少占用空间的大小 ;应用中使用的小图标 , 一般都使用 SVG 格式 ;Android 中生成 Vector 矢量图资源但是在 Android 中 , 不能直接使用标准的 SVG 文件 , 使用 Vector Assets 实现对 SVG 图片格式的支持 , Vector 矢量图也是 XML 文件 , 根节点必须是 <vector> , 并且内容格式也有一定的不同 ;SVG 图片的根节点是 <svg> ;Vector 资源的根节点是 <vector> ;在 Android Studio 中 , 右键点击 res 资源目录 , 选择 " New / Vector Asset " 选项 ,

背景：        由于业务场景需要展示作业之间的依赖关系，由于一些开源的插件和当前的业务逻辑有一些冲突，个人打算尝试从零开始，一点点实现自己的DAG图。同时用博客记录自己实现过程和总结，不正确的地方，欢迎指正提升。场景分析：        1.  数据开发中常常有作业之间的依赖，在执行作业的时候，可能会出现有些作业失败，或者重试，这时候，运维或者开发的人，需要有一个很直观的图去展示作业之间的依赖，这时候DAG 依赖流程图就是一个很好的展现形式。        2.  大数据场景下，可能会出现很多节点，甚至可能达到上千，甚至上万的节点，节点之间的边有可能也会很多，大的数据下，图的渲染时间需要考虑在内        3.  用户有可能在看了图之后，想直接重跑或者查看某个节点的上下游节点，等等运维操作        4.  用户可能需要图拖动某个算子，点击某个算子，复制某些算子的名称等一些操作实现目标：        基于以上客户的要求，我们大致明确要实现目标和需求，梳理如下        1.  用图的方式展示作业之间的依赖，基本能力要达到        2.  图要能够支撑大数据场景，在很多节点下节点之间布局清晰节点的之间的连线不要重叠，少交叉图能够支持缩放，拖动   图中节点支持拖动        3.  图要支持运维能力 悬浮某个节点 ，展示该节点的上下游，能够区分上下游节点选中某个节点，以及支持选中某个节点全部上游或者下游节点右键可以定制化业务操作，例如作业实例的重跑，停止作业名称支持复制选中具体某个节点可以展示该节点的信息面板        4.  优化提升提供鸟瞰图的功能，保证大数据下可以查找节点      提供搜索功能，能够精准在图上定位出要找的作业交互设计稿：        基于以上目标，设计稿大致如下技术选型：         一般的DAG，就两种方式，一种是canvas实现，另外一种就是svg，由于svg 对于事件处理比较简单，但是性能会差一些，后续如果svg 性能搞不定，可以使用canvas优化，新手，所以这里我选择了svg。用了svg.js,这个开源的插件，封装了一些简单的svg 函数，可以减少部分工作量。实现过程概览：        个人打算分一下几个方面，逐步实现。规划，背景，交互设计方案，技术选型节点的分层布局算法节点之间的线条路径图上运维--右键，选中，节点复制等图上事件--缩放，平移，节点拖动等后期优化--纵向排列优化后期优化--鸟瞰图以及搜索框及其他后期优化--大数据节点优化基本工作已经准备完了，接下来开搞！