如何使用draw.io插件在vscode中一体化导出高质量图片

‘’’
Author: zzx
Date: 2022-07-30 15:52:15
LastEditors: zdl
LastEditTime: 2022-07-30 16:03:20
FilePath: \matlabcodef:\BaiduNetdiskWorkspace\markdown写杂谈\python导出drawio文件
Description:

Copyright © 2022 by zdl, All Rights Reserved.
‘’’

vscode一体化导出drawio

需要的工具:vscode, draw.io扩展,draw.io桌面版 、python

提示:这个方法并没有简化流程,只是能够减少打开窗口,在vscode中直接查看原始文件,导出文件,效率并没有显著提升。

啰嗦的部分:
drawio流程图绘制软件比visio好用。而且vscode有插件。vs插件的优点在于支持mermaid流程图,缺点非常明显不支持指定分辨率图像导出。
网上检索发现drawio的桌面版可以在命令行操作。在drawio安装目录下运行cmd,然后通过draw.io -help 命令可以查看全部命令。
查看命令发现没有针对性的dpi设置。我就想到给图片输入宽度和高度的方式。根据我猜测这个宽度和高度应该对应的就是像素点数量,所以我就按照实际尺寸,以及dpi的定义
写了一个命令, 发现可用。但是每次都要计算宽度、高度、调用cmd命令窗口,太麻烦。功能强大的python加上插件齐全的vscode能不能全部实现呢?
折腾了几个小时,终于搞定了。

进入正题:
1、安装draw.io插件,和桌面版,记住桌面版的路径
2、绘制好的图片有一个实际的尺寸,记住实际尺寸的宽和高
3、python转换 宽度

dpivalue=600#dpi
realwidth=89.4#mm
realheight=81.2#mm
width=round(dpivalue*realwidth/25.4)
height=round(dpivalue*realheight/25.4)

4、 构造命令行,不嫌麻烦可以自己写完整目录

inputfilepath=r'F:\BaiduNetdiskWorkspace\00typora\大论文\drawio\算法流程图.drawio'
outputfilepath=r'F:\BaiduNetdiskWorkspace\00typora\大论文\drawio\test.png'
starttext=r'draw.io -x '
midletext=r" -f png -t --width "+str(width)+r" --height " +str(height)+r" -o "
commandtext1=starttext+inputfilepath+midletext+outputfilepath

5、 改变python文件工作目录并执行命令

path="D:/draw.io/"#安装文件夹
os.chdir( path )# 修改当前工作目录
v2=os.system(commandtext1)

完整的代码

代码量并不大,非常简单

'''
Author: zzx
Date: 2022-07-27 10:12:38
LastEditors: zdl
LastEditTime: 2022-07-30 16:10:22
FilePath: \matlabcodef:\BaiduNetdiskWorkspace\00typora\大论文\drawio\output.py
Description: 

Copyright (c) 2022 by zdl, All Rights Reserved.
'''
import os
dpivalue=600#dpi
realwidth=89.4#mm
realheight=81.2#mm
width=round(dpivalue*realwidth/25.4)
height=round(dpivalue*realheight/25.4)
inputfilepath=r'F:\BaiduNetdiskWorkspace\00typora\大论文\drawio\算法流程图.drawio'
outputfilepath=r'F:\BaiduNetdiskWorkspace\00typora\大论文\drawio\test.png'
starttext=r'draw.io -x '
midletext=r" -f png -t --width "+str(width)+r" --height " +str(height)+r" -o "
commandtext1=starttext+inputfilepath+midletext+outputfilepath
path="D:/draw.io/"#安装文件夹
os.chdir( path )# 修改当前工作目录
v2=os.system(commandtext1)

# 快速运行F5
# print(v2)

#关于python权限的问题
# https://blog.csdn.net/qq_33731081/article/details/103812749
# 如何在python中运行命令行命令
# https://blog.csdn.net/qq_34769162/article/details/119037908
#报错为空值的问题
# https://blog.csdn.net/xiaoxiaogh/article/details/88320102

#关于drawio导出命令,灵感来源https://j2r2b.github.io/2019/08/06/drawio-cli.html
'''
Options:
  -V, --version                      output the version number
  -c, --create                       creates a new empty file if no file is
                                     passed
  -k, --check                        does not overwrite existing files
  -x, --export                       export the input file/folder based on the
                                     given options
  -r, --recursive                    for a folder input, recursively convert
                                     all files in sub-folders also
  -o, --output <output file/folder>  specify the output file/folder. If
                                     omitted, the input file name is used for
                                     output with the specified format as
                                     extension
  -f, --format <format>              if output file name extension is
                                     specified, this option is ignored (file
                                     type is determined from output extension,
                                     possible export formats are pdf, png, jpg,
                                     svg, vsdx, and xml) (default: "pdf")
  -q, --quality <quality>            output image quality for JPEG (default:
                                     90)
  -t, --transparent                  set transparent background for PNG
  -e, --embed-diagram                includes a copy of the diagram (for PNG,
                                     SVG and PDF formats only)
  --embed-svg-images                 Embed Images in SVG file (for SVG format
                                     only)
  -b, --border <border>              sets the border width around the diagram
                                     (default: 0)
  -s, --scale <scale>                scales the diagram size
  --width <width>                    fits the generated image/pdf into the
                                     specified width, preserves aspect ratio.
  --height <height>                  fits the generated image/pdf into the
                                     specified height, preserves aspect ratio.
  --crop                             crops PDF to diagram size
  -a, --all-pages                    export all pages (for PDF format only)
  -p, --page-index <pageIndex>       selects a specific page, if not specified
                                     and the format is an image, the first page
                                     is selected
  -g, --page-range <from>..<to>      selects a page range (for PDF format only)
  -u, --uncompressed                 Uncompressed XML output (for XML format
                                     only)
  --enable-plugins                   Enable Plugins
  -h, --help                         display help for command
'''

到此这篇关于draw.io插件在vscode中一体化导出高质量图片的文章就介绍到这了,更多相关draw.io vscode一体化导出图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vscode内网访问服务器的方法

    目录 文章背景 1.插件 插件下载 插件安装 2.内网无网络安装ssh无法访问服务器 下载vscode-server-linux-x64.tar.gz 使用vscode-server-linux-x64.tar.gz 文章背景 公司内网需要看代码,用原装工具实在太难受了,于是可以在传入vscode插件 文章由一个ssh插件进行加撰写,如有错误还请谅解. 1.插件 插件下载 插件下载:https://marketplace.visualstudio.com/VSCode下载注意:版本问题很重要,不

  • VSCode创建Vue项目的完整步骤教程

    目录 一.配置环境 1.安装VS Code 2.安装node.js 3.安装配置脚手架vue-cli 二.创建vue项目 1.命令方式创建 2.重新初始化依赖 3.启动项目 补充:在VScode中如何使用vue代码 总结 一.配置环境 1.安装VS Code 官网下载 https://code.visualstudio.com/ 下载VS Code,按照步骤安装. 2.安装node.js (1)官网 https://nodejs.org/en/ 下载node.js,按照步骤安装即可,node.j

  • 如何使用draw.io插件在vscode中一体化导出高质量图片

    ‘’’Author: zzxDate: 2022-07-30 15:52:15LastEditors: zdlLastEditTime: 2022-07-30 16:03:20FilePath: \matlabcodef:\BaiduNetdiskWorkspace\markdown写杂谈\python导出drawio文件Description: Copyright © 2022 by zdl, All Rights Reserved.‘’’ vscode一体化导出drawio 需要的工具:vs

  • 解决vscode中golang插件依赖安装失败问题

    vscode中安装ms-vscode.go插件后可以开启对go语言的支持,ms-vscode.go插件需要依赖一些工具,安装完成后提示 gocode go-outline go-symbols guru gorename gocode-gomod goreturns golint Installing github.com/ramya-rao-a/go-outline FAILED 由于网络原因,一些依赖工具无法正常安装,需要进行手动安装. 以下为手动安装的工具的步骤: 在%GOPATH%\sr

  • 详解vscode中vue代码颜色插件

    vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了. 在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue,vue-beautify,vue-color,VueHelper,vertur等等.比较了下载数量可以了解到,vetur 是目前比较好的语法高亮插件,我们来安装一下吧. vscode提

  • vscode中配置LeetCode插件的教程(愉快刷题)

    大家好,今早在B站看到up主的vscode里藏了leetcode插件,这才知道原来还有这款神器.但是没想到在用的时候遇到了一些麻烦,花了一点时间才解决.所以写这篇文章除了给大家安利这个好用的插件之外,也是为了帮助更多的同学避免踩坑. 简介vscode vscode在工业界鼎鼎大名,被誉为微软少有的拿得出手的精品(逃).原本是不想过多赘述的,但是鉴于许多粉丝还是正在上学的萌新,所以花点笔墨简单介绍一下. vscode是微软开发的编辑器,严格说起来它并不是一个IDE,只是一个编辑器.但是由于它支持嵌

  • 成功安装vscode中go的相关插件(详细教程)

    让你成功安装vscode中go的相关插件 注意:该演示环境是windows环境,linux和mac环境操作思路一样 vscode中有很多go的相关插件,非常好用如下: gocode gopkgs go-outline go-symbols guru gorename gomodifytags goplay impl godef goreturns golint gotests dlv 但是由于各种原因,这些插件无法安装,甚至你翻墙之后发现也还是无法安装,加上最近翻墙被限制的这么严格,所以总结了如

  • VSCode中ESLint插件修复以及配置教程

    目录 vscode+eslint插件+配置教程 如果不好用 排查1: 如果出现后面回车符问题 排查2: 保存时好了但是一瞬间代码又回来了 排查3: 右下角是否开启eslint服务 排查4: 如果保存还是变回去了 排查5: ESLint不生效 排查6: 如果都用心走了一遍, 还不行 总结 vscode+eslint插件+配置教程 1.打开项目, 必须让Vscode左侧工作区根目录是项目文件夹, 确保根目录下(第一级)有eslintrc.js / package.json中有eslint相关配置.

  • 在vscode中使用Git的教程

    vscode简介 VSCode是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验. 布局:左侧是用于展示所要编辑的所有文件和文件夹的文件管理器,依次是资源管理器,搜索,GIT,调试,插件,右侧是打开文件的编辑区域,最多可同时打开三个编辑区域到侧边.在初次使用时如果本地没有安装git会提示先安装git,然后重启vscode. 用了git最方便的就是比如在公司写了很多代码后回到家打开vscode只需要点击一下pull就能全部同步过来.是不是很方便....毕竟

  • vscode中vue-cli项目es-lint的配置方法

    本文主要介绍vscode中 vue项目es-lint的配置,有任何错误的地方欢迎大佬指出 开始 安装插件 如图所示: vscode设置 安装完成之后,到vscode中的 文件-->首选项-->设置 中 添加如下代码 "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", "html",

  • 详解Vscode中使用Eslint终极配置大全

    在 vue项目中使用vscode编辑时,使用了如下这套配置,保存时就会根据既定vue项目中.eslintrc.js文件设置的既定规则自动校验并依据规则修复代码. 需安装插件 主要是这两个插件: ESLint Prettier - Code formatter 个人现用vscode插件截图.png vscode中setting.json中配置 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, /

  • 在VSCode中如何配置Python开发环境

    之前编写Python更多的是使用pycharm作为编译器进行开发,但是个人感觉用起来比较笨重,而且还收费的,需要进行破解才能使用.后来发现vscode这个软件,觉得很轻便,而且和之前使用的vs2018风格一样. 在这里对vscode配置Python开发环境做一下记录. 步骤1:安装Python 安装Python的教程网上有很多.直接到官网下载安装就行. 下载链接:https://www.python.org/ 步骤2:安装vscode 安装很简单,直接点击安装文件,然后一直点击next就可以了.

随机推荐