How Do You Draw Mandatory Sign In Airport Design Editor

Creating nice diagrams in code with depict.io

Updated 21 September 2020

Tags: Writing

Comments

Tin can I but say that I FLIPPING LOVE DIAGRAMS AS Lawmaking. I've long had dreams well-nigh being able to practice everything in code.

All of these things really excite me (a bit weird, I know):

• book publishing as code (did this! wrote my volume using Asciidoctor)

• presentations every bit code (tried this, using Reveal.js, and it'south fabulous)

• infrastructure as code (Ansible!)

• pipelines-every bit-code (uh-oh, Jenkinsfiles 😩)

But the one thing that has always eluded me has been diagrams as code. I tried Graphviz simply, permit'southward be honest, it's primarily designed for graphs, and non actually the kind of diagrams yous would share at your next team coming together or fun political party.

PlantUML is a proficient option if yous want diagrams that fit a particular template (sequence diagrams, class diagrams, and so on).

What nearly other kinds of diagrams? Network diagrams, system diagrams, architecture diagrams?

I don't think there is a tool that can generate circuitous but squeamish-looking diagrams from pseudo-code. Yet.

But what if….in that location was a decent offline diagramming tool, that saves in a sensible text-based format (SVG), with an accompanying control-line interface so you lot tin easily generate bitmaps for sharing.

Well, I finally discovered it. It's diagrams.cyberspace (formerly draw.io)! I'd heard about the web-based version, just I didn't know that in that location is also a version for the desktop. It's a cross-platform app developed in Electron, and you tin can run it on Windows, Mac and Linux.

Drawio Desktop on GitHub

Diagrams.net Desktop runs entirely locally. No web access is required, it doesn't require an account, or fetching annihilation remotely. It has all the master features yous'd expect for creating diagrams, including built-in shapes and themes. It'southward really peachy, and it's open source.

I've used it for a couple of projects now and I actually like it. It meets my criteria of open source, looks good and actually works ✅.

So now fourth dimension for an example.

My workflow for creating diagrams with Diagrams.net Desktop

Hither's my personal workflow for using Diagrams.net. We'll create a trendy app / boring architecture diagram as SVG, add together the source to a Git repo, and and so build a PNG file so it can be shared over email, or included in another doc.

1. Install drawio.

   🍏 On Mac - via Homebrew:

   🐧 On Fedora - download the latest RPM bundle from the drawio-desktop's GitHub Releases page, then install using rpm:

                       sudo rpm -i draw.io-x86-64-<version>.rpm                                      

2. Start Describe.io Desktop and create your diagram using the UI:

   

   Creating a nonsensical menstruation chart in Drawio (other diagrams are bachelor)

3. Export it every bit an SVG (File > Export As > SVG).

   Note: It isn't mandatory to use SVG here, you could just salvage the .drawio file (the default), merely I prefer to use SVG, because it is a more widely-used format.

4. Commit the SVG into your Git repository if you like (probably a good idea):

                       git add mydiagram.svg git commit -1000 "Made a diagram!"                                      

5. If yous need the diagram in PNG format, you tin can use the drawio command-line tool to generate information technology for you.

   🍏 On Mac - utilise the draw.io binary within the draw.io.app parcel. This example will scale the diagram to 250%, and output to PNG:

                       /Applications/describe.io.app/Contents/MacOS/draw.io \     -x -f png --calibration 2.5 -o published-diagram.png mydiagram.svg                                      

   🐧 On Linux, just utilise the drawio binary:

                       drawio -x -f png --scale ii.5 \     -o published-diagram.png mydiagram.svg                                      

   Now yous have your SVG every bit a high-res PNG, which yous can use anywhere! (The epitome doesn't look great hither, but that'southward considering it'south been resized for web)

   

   Diagram exported as a PNG

6. If yous're using the generated diagram in a document (like a Markdown or Asciidoctor document), then but regenerate the diagram whenever you lot build your PDF.

   For example, when I'm writing an Asciidoctor document, I create a build script build.sh similar this, which generates the prototype start, then builds my PDF:

                                             #!/bin/sh                      # Update the PNG renders of the diagrams                      drawio                      -x                      -f                      png                      --scale                      2.5                      \                      -o                      images/architecture.png images/architecture.svg                      # Generate my Asciidoc PDF from code                      packet                      exec                      asciidoctor-pdf                      \                      -a                      pdf-fontsdir=                      "./fonts/;GEM_FONTS_DIR"                      \                      ./my-big-certificate.adoc                                      

   Then I but run this script whenever I desire to build the PDF for sharing.

7. Whenever you need to update the diagram, just open the SVG in Draw.io Desktop and brand your changes. And then rebuild using the command-line, or your build script.

Now reap the rewards of version-controlled, easily-collaborated diagrams! 💕

What else can draw.io practise?

There's a bunch of options yous can pass to the control-line tool. For more info, cheque out the command-line aid for drawio:

                $ drawio --help Usage: drawio [options] [input file/folder]  Options:   -V, --version                      output the version number   -c, --create                       creates a new empty file if no file is passed   -m, --bank check                        does not overwrite existing files   -x, --consign                       consign 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/binder>  specify the output file/folder. If omitted, the input file proper noun is used for output                                      with the specified format as extension   -f, --format <format>              if output file proper noun extension is specified, this choice is ignored (file blazon is                                      determined from output extension, possible export formats are pdf, png, jpg, svg,                                      vsdx) (default: "pdf")   -q, --quality <quality>            output epitome quality for JPEG (default: 90)   -t, --transparent                  set transparent background for PNG   -east, --embed-diagram                includes a copy of the diagram (for PNG format merely)   -b, --border <border>              sets the border width effectually the diagram (default: 0)   -due south, --scale <calibration>                scales the diagram size   --width <width>                    fits the generated epitome/pdf into the specified width, preserves attribute ratio.   --height <tiptop>                  fits the generated epitome/pdf into the specified height, preserves aspect ratio.   --crop                             crops PDF to diagram size   -a, --all-pages                    export all pages (for PDF format merely)   -p, --page-index <pageIndex>       selects a specific page, if not specified and the format is an image, the starting time                                      page is selected   -g, --folio-range <from>..<to>      selects a folio range (for PDF format only)   -h, --help                         brandish help for command                              

Comments

What do y'all remember? You lot can use Markdown in your comment.

To write code, indent each line with four spaces. Or, to paste a lot of code, y'all can put it in pastebin.com and share the link in your annotate.

Source: https://tomd.xyz/diagrams-as-code-drawio/

Posted by: ranasion1950.blogspot.com

Share this post