Git Product home page Git Product logo

markdown-inline-graphviz's Introduction

Markdown Inline Graphviz

A Python Markdown extension that replaces inline Graphviz definitins with inline SVGs or PNGs!

Why render the graphs inline? No configuration! Works with any Python-Markdown-based static site generator, such as MkDocs, Pelican, and Nikola out of the box without configuring an output directory.

Installation

$ pip install markdown-inline-graphviz

Usage

Activate the inline_graphviz extension. For example, with Mkdocs, you add a stanza to mkdocs.yml:

markdown_extensions:
    - inline_graphviz

To use it in your Markdown doc:

{% dot attack_plan.svg
    digraph G {
        rankdir=LR
        Earth [peripheries=2]
        Mars
        Earth -> Mars
    }
%}

Supported graphviz commands: dot, neato, fdp, sfdp, twopi, circo.

Credits

Inspired by jawher/markdown-dot, which renders the dot graph to a file instead of inline.

License

MIT License

markdown-inline-graphviz's People

Contributors

dev-zero avatar sprin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

markdown-inline-graphviz's Issues

Error : a bytes-like object is required, not 'str' : ['dot', '-Tsvg']

Hey If I try your example
with mkdocs material I get this error:

Error : a bytes-like object is required, not 'str' : ['dot', '-Tsvg']

For this code:
{% dot attack_plan.svg
digraph G {
rankdir=LR
Earth [peripheries=2]
Mars
Earth -> Mars
}
%}

I also tried to incooperate it like this:

```graphviz
digraph finite_state_machine {
    rankdir=LR;
    size="8,5"

    node [shape = doublecircle]; S;
    node [shape = point ]; qi

    node [shape = circle];
    qi -> S;
    S  -> q1 [ label = "a" ];
    S  -> S  [ label = "a" ];
    q1 -> S  [ label = "a" ];
    q1 -> q2 [ label = "ddb" ];
    q2 -> q1 [ label = "b" ];
    q2 -> q2 [ label = "b" ];
}

graceful fail of not finding graphviz dot binary

Would it be possible to handle a condition where dot is not found and generate (or reference) an image stating something like "install graphviz, dot not found". currently markdown i think just crashes and the entire page doesn't get rendered. actually, even just a broken image would be okay for me.

it would also be really useful to be able to specify multiple paths for the dot binary like the code you showed me earlier.

The problem that I have is that the systems running this plugin will be either linux or osx and most will not have dot installed

MkDocs Error

Pip install successful but MkDocs spits out the following on the example from the readme:

Error : [Errno 2] No such file or directory : [u'dot', u'-Tsvg']

How to use it with pandoc

Can't figure out how to use it with Pandoc. Now I'm using similar script via pandoc filters. When I am trying to activate extension like that markdown+inline_graphviz, I get the following error

pandoc: Unknown extension: inline_graphviz

What I am doing wrong?

Error: Failed loading extension

I have installed mkdocs, inline_graphviz and graphviz. One of my systems works properly and generates the inline SVG. However, on two other systems with same installed packages, I get the following error:

$ mkdocs build
ERROR   -  Config value: 'markdown_extensions'. Error: Failed loading extension "inline_graphviz".

Aborted with 1 Configuration Errors!

Here is the mkdocs.yml file:

markdown_extensions:
    - inline_graphviz
site_name: relay01
nav:
    - Home: index.md
    - Files: files.md

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.