Code Monkey home page Code Monkey logo

dld4e-headless's Introduction

Decent looking diagrams for engineers - headless

Send dld4e.com yaml files to this service to obtain server side rendered network diagrams.

Groups

See dld4e.com

Usage

Run with

    docker run -p 3030:3030 bonndan/dld4e-headless:latest 

Test SVG generation ((send accept header) with

    cat examples/groups.yaml | curl -v -X POST -H "Content-Type: text/yaml" -H "Accept: image/svg+xml" --data-binary @- http://localhost:3030 > /tmp/groups.svg

Test PNG generation (default) with

    cat examples/groups.yaml | curl -v -X POST -H "Content-Type: text/yaml"  --data-binary @- http://localhost:3030 > /tmp/groups.png

Development

This app requires imagemagick.

    sudo apt-get install imagemagick
    npm install

Run with

    node --inspect src/index.js

or for debugging in docker

    docker run -p 3030:3030 -p 9229:9229 bonndan/dld4e-headless:latest

License

This project is licensed under the MIT License. MIT License.

dld4e-headless's People

Stargazers

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

Watchers

 avatar  avatar  avatar  avatar  avatar

dld4e-headless's Issues

Notes text

Hi, looks like the notes text is always empty.

Recent Node changes seem to have broken the app

I just did a fresh docker build on the app. Sending a request to the application generates an error on the console

ReferenceError: navigator is not defined at HTMLUnknownElement.defaultTouchable (/usr/src/app/node_modules/d3-zoom/dist/d3-zoom.js:108:3) at Selection.selection_filter [as filter] (/usr/src/app/node_modules/d3-selection/dist/d3-selection.js:106:38) at zoom (/usr/src/app/node_modules/d3-zoom/dist/d3-zoom.js:145:8) at Selection.selection_call [as call] (/usr/src/app/node_modules/d3-selection/dist/d3-selection.js:329:12) at Object.draw (/usr/src/app/src/dld4e/dld4e-draw.js:115:6) at /usr/src/app/src/index.js:31:22 at Layer.handle [as handle_request] (/usr/src/app/node_modules/express/lib/router/layer.js:95:5) at next (/usr/src/app/node_modules/express/lib/router/route.js:137:13) at Route.dispatch (/usr/src/app/node_modules/express/lib/router/route.js:112:3) at Layer.handle [as handle_request] (/usr/src/app/node_modules/express/lib/router/layer.js:95:5)

Googling the general error generates some stuff about this being browser based (but of course this application is designed not to be)...

I've narrowed this error down to the lines:

var svg = d3.select(d3n.document.querySelector("#svg")).append("svg") .attr("width", parentBox.width) .attr("height", parentBox.height) .style("background-color", diagram.fill) .call(d3.zoom().on("zoom", function () { svg.attr("transform", d3.event.transform) })) .append("g") .attr("transform", "translate(" + (parentBox.width - svgWidth) / 2 + "," + (parentBox.height - svgHeight) / 2 + ")");

And specifically:

.call(d3.zoom().on("zoom", function () { svg.attr("transform", d3.event.transform) }))

part of that statement.

I suspect something subtle has changed in the underlying Node.JS modules, but I am not a Node expert.

connectionLabelFontSize issue

Hi, thanks for creating an api for this, anyway we can control: connectionLabelFontSize? even if we can edit it on the css file it would be great, i'm using bigger icons with lots of colums/rows which gives me the flexibility to move them around, but then the connection label remains the original size, which is super tiny.

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.