# Graphviz


Programm the graph plotting


29 years ago, written in C

DOT language scripts

  • Directed Graph
  • Undirected graph

graphviz piechart

# graphviz tools

tool description
dot hierarical model layout
neato spiral model layout
fdp spiral - Fruchterman-Reingold heuristic
sfdp multiscale version on fdp
twopi radial layouts
circo circular layouts
Awesome Graphviz

# What can graphwiz do?

  1. Plott Graphs
    1. directed
    2. undirected
  2. Flowcharts - changing graph node shape
  3. Entity Relation model - ER models
  4. Tabular, hoerarical Database Schemeas
  5. Finite Automata FAM
  6. Network Connections

# DOT Languague

  • subgraphs and clusters fro logical grouping

# Graphviz alternatives

  1. plantuml
    1. java based
  2. graphviz

# Interesting Use cases

  1. plott package dependency graphs
    1. in yocto
    2. in PyCharm
  2. plott directory hierarchy / Folder structure
  3. Network diagrams

# Others

  • How to make charts with just vanilla SVG[1]
    • Sparklines - lines at an angle
    • Pie charts - circle with and an arc
    • Bar chart / histogram - filled rectangles
  • Use vsCode SVG snippets and extensions to help writing SVG markup
  • SVG snippets examples

# How to make vsCode snippets and Extension and publish them?

Emmet shortcuts

  • !TAB to print html boilerplate
  • tab stops $0, $1 where you want your cursor to be after snippet is pasted
  • Placeholders are tabstops with values, like ${1:foo}
  • Placeholders can be nested, like ${1:another ${2:placeholder}}
  • Placeholders can have choices as values. The syntax is a comma-separated enumeration of values, enclosed with the pipe-character, for example ${1|one,two,three|}
  • Assign Keybinding to snippets

How to publish vscode snippet as an extension

Use yoeman, scaffolding tool call snippet.json inside package.json publish to npm using vsce tool

SVG Purpose

building interactive graphs with SVG, CSS and Javascript think animations, shadows and tooltips

See the Pen svg-interactable-chart by avimehenwal (@avimehenwal) on CodePen.

# Resources

  1. https://css-tricks.com/how-to-make-charts-with-svg/ ↩ī¸Ž