Giter VIP home page Giter VIP logo

syntax-diagram's Introduction

Railroad-diagram Generator

This is a small js library for generating railroad diagrams (like what JSON.org uses) using SVG.

Railroad diagrams are a way of visually representing a grammar in a form that is more readable than using regular expressions or BNF.

This code is forked from tabatkins/railroad-diagrams, which implimented a Javascript and Python Version, This project has reworked the Python Version into a proper Pythonb module, installable using setup tools.

Details

To use the library, import railroad_diagram, and then call the railroad_diagram.Diagram() function. Its arguments are the components of the diagram (Diagram is a special form of Sequence). Components are either leaves or containers.

The leaves:

  • railroad_diagram.Terminal(text) or a bare string - represents literal text, EBNF "text"
  • railroad_diagram.NonTerminal(text) - represents an instruction or another production, EBNF text
  • Comment(text) - a comment, EBNF (* text *)
  • Skip() - an empty line

The containers:

  • railroad_diagram.Sequence(children) - like simple concatenation in a regex, EBNF s1, s2, ...
  • railroad_diagram.Choice(index, children) - List of Options. The index argument specifies which child is the "normal" choice and should go in the middle, EBNF c1 | c2 | ...
  • Optional(child, skip) - A shorthand for Choice(1, [Skip(), child]). If the optional skip parameter has the value "skip", it instead puts the Skip() in the straight-line path, for when the "normal" behavior is to omit the item. EBNF [child] or child?
  • railroad_diagram.OneOrMore(child, repeat) - The 'repeat' argument is optional, and specifies something that must go between the repetitions. EBNF {child} or child+
  • railroad_diagram.ZeroOrMore(child, repeat, skip) - A shorthand for Optional(OneOrMore(child, repeat)). The optional skip parameter is identical to Optional(). EBNF [{child}] or child*

You'll find a writeSvg(writerFunc) method on Diagram, which takes a callback of one argument and passes it the string form of the diagram. For example, it can be used like Diagram(...).writeSvg(sys.stdout.write) to write to stdout.

Note: the callback will be called multiple times as it builds up the string, not just once with the whole thing. If you need it all at once, consider something like a StringIO as an easy way to collect it into a single string.

Options

There are a few options you can tweak, at the bottom of the file. Just tweak either until the diagram looks like what you want. You can also change the CSS file - feel free to tweak to your heart's content. Note, though, that if you change the text sizes in the CSS, you'll have to go adjust the metrics for the leaf nodes as well.

  • railroad_diagram.VERTICAL_SEPARATION - sets the minimum amount of vertical separation between two items. Note that the stroke width isn't counted when computing the separation; this shouldn't be relevant unless you have a very small separation or very large stroke width.
  • railroad_diagram.ARC_RADIUS - the radius of the arcs used in the branching containers like Choice. This has a relatively large effect on the size of non-trivial diagrams. Both tight and loose values look good, depending on what you're going for.
  • railroad_diagram.DIAGRAM_CLASS - the class set on the root <svg> element of each diagram, for use in the CSS stylesheet.
  • railroad_diagram.STROKE_ODD_PIXEL_LENGTH - the default stylesheet uses odd pixel lengths for 'stroke'. Due to rasterization artifacts, they look best when the item has been translated half a pixel in both directions. If you change the styling to use a stroke with even pixel lengths, you'll want to set this variable to false.
  • railroad_diagram.INTERNAL_ALIGNMENT - when some branches of a container are narrower than others, this determines how they're aligned in the extra space. Defaults to "center", but can be set to "left" or "right".

Caveats

At this early stage, the generator is feature-complete and works as intended, but still has several TODOs:

  • The font-sizes are hard-coded right now, and the font handling in general is very dumb - I'm just guessing at some metrics that are probably "good enough" rather than measuring things properly.

License

This Fork is Copyright 2014 AlphaOmega Technology

Licensed under the AlphaOmega Technology Open License Version 1.0

You may obtain a copy of the License at http://www.alphaomega-technology.com.au/license/AOT-OL/1.0

This License only applies to the modifications made by this fork, the files railroad_diagram/core.py and railroad_diagram/style.css are unmodified and the orginal license applies.

The Orginal project tabatkins/railroad-diagrams is licensed under CC0. And can be used freely.

syntax-diagram's People

Contributors

tabatkins avatar simonsapin avatar glenfletcher avatar rparree avatar bkiers avatar sebastien-f avatar

Watchers

James Cloos avatar  avatar  avatar

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.