Git Product home page Git Product logo

mscfiddle's Introduction

MSC Fiddle

Renders an msc file into an SVG. It presents the SVG wrapped in a live-reloaded HTML page, so that whenever the msc file is saved, the image is regenerated and the browser will auto-refresh the image.

Installation

$ brew bundle # Installs msc
$ bundle      # Installs Ruby prereqs

Usage

  1. bundle exec guard
  2. thin start
  3. Open localhost:3000 in the browser

Every subsequent save to an msc file will trigger a browser refresh, e.g. after touch doc/livereload.msc.

Auto-Regenerating an MSC Chart

A guard rule is set up to generate an SVG from each msc file in the root directory of this app like this:

$ mscgen -T svg -i *.msc

For the MSC syntax, see the msc home page.

Live-reloaded Images

The inner workings of this app are explained in the file livereload.msc. If guard is running, it will generate livereload.svg whenever livereload.msc changes. Due to the change in livereload.svg, guard will then notify the livereload server to send an update request to all connected browsers:

http://localhost:3000/livereload

wraps

http://localhost:3000/livereload.svg

in a simple HTML page with livereload.

Development

Thin needs to restart in order to pick up changes in the web app. This can be automated with

$ bundle exec rerun -d lib thin start

TODO

  • Post MSC from browser-form so that we don't need local files
  • Make it a gem that has a bin script that can serve any directory
    • mscfiddle doc/livereload.msc would launch a web server that livereloads whenever this file was changed

mscfiddle's People

Contributors

marcschunk avatar suhlig avatar

Watchers

 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.