control edge rendering of a network in vis.js

Question

I am working on a control flow graph visualizer using vis.js. it's like the example provided by the maintainesr here.

the following image shows the result:

I want control the way edges are drawn: out arrows start from the bottom and in arrows end at the top of the node. is there a way to have such behavior in vis.js? also can I prevent edges from crossing nodes?

this is my options:

var opts = {
    autoResize: true,
    height: '100%',
    width: '100%',
    locale: 'en',
    edges: {
        arrows: { to: {enabled: true}},
        smooth: { enabled: true}
    },
    nodes: {
        font: {'face': 'monospace', 'align': 'left'}
    },
    layout: {
        improvedLayout:true,
        hierarchical: {
            enabled: true,
            sortMethod: "directed",
            direction: "UD",
            nodeSpacing: 200,
            levelSeparation: 200,
        }
    },
    physics:  {
        hierarchicalRepulsion: {
            nodeDistance: 300
        }
    }
};

var network = new vis.Network(this.domRoot.find(".graph-placeholder")[0], 
                                         this.defaultCfgOuput, opts);