render = function render(id, _txt, cb, container) {
  // Check the maximum allowed text size
  var txt = _txt;

  if (_txt.length > config.maxTextSize) {
    txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
  }

  if (typeof container !== 'undefined') {
    container.innerHTML = '';
    d3__WEBPACK_IMPORTED_MODULE_0__["select"](container).append('div').attr('id', 'd' + id).attr('style', 'font-family: ' + config.fontFamily).append('svg').attr('id', id).attr('width', '100%').attr('xmlns', 'http://www.w3.org/2000/svg').append('g');
  } else {
    var existingSvg = document.getElementById(id);

    if (existingSvg) {
      existingSvg.remove();
    }

    var _element = document.querySelector('#' + 'd' + id);

    if (_element) {
      _element.innerHTML = '';
    }

    d3__WEBPACK_IMPORTED_MODULE_0__["select"]('body').append('div').attr('id', 'd' + id).append('svg').attr('id', id).attr('width', '100%').attr('xmlns', 'http://www.w3.org/2000/svg').append('g');
  }

  window.txt = txt;
  txt = encodeEntities(txt);
  var element = d3__WEBPACK_IMPORTED_MODULE_0__["select"]('#d' + id).node();
  var graphType = _utils__WEBPACK_IMPORTED_MODULE_5__["default"].detectType(txt); // insert inline style into svg

  var svg = element.firstChild;
  var firstChild = svg.firstChild; // pre-defined theme

  var style = themes[config.theme];

  if (style === undefined) {
    style = '';
  } // user provided theme CSS


  if (config.themeCSS !== undefined) {
    style += "\n".concat(config.themeCSS);
  } // user provided theme CSS


  if (config.fontFamily !== undefined) {
    style += "\n:root { --mermaid-font-family: ".concat(config.fontFamily, "}");
  } // user provided theme CSS


  if (config.altFontFamily !== undefined) {
    style += "\n:root { --mermaid-alt-font-family: ".concat(config.altFontFamily, "}");
  } // classDef


  if (graphType === 'flowchart') {
    var classes = _diagrams_flowchart_flowRenderer__WEBPACK_IMPORTED_MODULE_6__["default"].getClasses(txt);

    for (var className in classes) {
      style += "\n.".concat(className, " > * { ").concat(classes[className].styles.join(' !important; '), " !important; }");

      if (classes[className].textStyles) {
        style += "\n.".concat(className, " tspan { ").concat(classes[className].textStyles.join(' !important; '), " !important; }");
      }
    }
  }

  var style1 = document.createElement('style');
  style1.innerHTML = scope_css__WEBPACK_IMPORTED_MODULE_1___default()(style, "#".concat(id));
  svg.insertBefore(style1, firstChild);
  var style2 = document.createElement('style');
  var cs = window.getComputedStyle(svg);
  style2.innerHTML = "#".concat(id, " {\n    color: ").concat(cs.color, ";\n    font: ").concat(cs.font, ";\n  }");
  svg.insertBefore(style2, firstChild);

  switch (graphType) {
    case 'git':
      config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
      _diagrams_git_gitGraphRenderer__WEBPACK_IMPORTED_MODULE_21__["default"].setConf(config.git);
      _diagrams_git_gitGraphRenderer__WEBPACK_IMPORTED_MODULE_21__["default"].draw(txt, id, false);
      break;

    case 'flowchart':
      config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
      _diagrams_flowchart_flowRenderer__WEBPACK_IMPORTED_MODULE_6__["default"].setConf(config.flowchart);
      _diagrams_flowchart_flowRenderer__WEBPACK_IMPORTED_MODULE_6__["default"].draw(txt, id, false);
      break;

    case 'sequence':
      config.sequence.arrowMarkerAbsolute = config.arrowMarkerAbsolute;

      if (config.sequenceDiagram) {
        // backwards compatibility
        _diagrams_sequence_sequenceRenderer__WEBPACK_IMPORTED_MODULE_9__["default"].setConf(Object.assign(config.sequence, config.sequenceDiagram));
        console.error('`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.');
      } else {
        _diagrams_sequence_sequenceRenderer__WEBPACK_IMPORTED_MODULE_9__["default"].setConf(config.sequence);
      }

      _diagrams_sequence_sequenceRenderer__WEBPACK_IMPORTED_MODULE_9__["default"].draw(txt, id);
      break;

    case 'gantt':
      config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
      _diagrams_gantt_ganttRenderer__WEBPACK_IMPORTED_MODULE_12__["default"].setConf(config.gantt);
      _diagrams_gantt_ganttRenderer__WEBPACK_IMPORTED_MODULE_12__["default"].draw(txt, id);
      break;

    case 'class':
      config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
      _diagrams_class_classRenderer__WEBPACK_IMPORTED_MODULE_15__["default"].setConf(config.class);
      _diagrams_class_classRenderer__WEBPACK_IMPORTED_MODULE_15__["default"].draw(txt, id);
      break;

    case 'state':
      // config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
      _diagrams_state_stateRenderer__WEBPACK_IMPORTED_MODULE_18__["default"].setConf(config.state);
      _diagrams_state_stateRenderer__WEBPACK_IMPORTED_MODULE_18__["default"].draw(txt, id);
      break;

    case 'info':
      config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
      _diagrams_info_infoRenderer__WEBPACK_IMPORTED_MODULE_24__["default"].setConf(config.class);
      _diagrams_info_infoRenderer__WEBPACK_IMPORTED_MODULE_24__["default"].draw(txt, id, _package_json__WEBPACK_IMPORTED_MODULE_2__.version);
      break;

    case 'pie':
      config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
      _diagrams_pie_pieRenderer__WEBPACK_IMPORTED_MODULE_27__["default"].setConf(config.class);
      _diagrams_pie_pieRenderer__WEBPACK_IMPORTED_MODULE_27__["default"].draw(txt, id, _package_json__WEBPACK_IMPORTED_MODULE_2__.version);
      break;
  }

  d3__WEBPACK_IMPORTED_MODULE_0__["select"]("[id=\"".concat(id, "\"]")).selectAll('foreignobject > *').attr('xmlns', 'http://www.w3.org/1999/xhtml'); // if (config.arrowMarkerAbsolute) {
  //   url =
  //     window.location.protocol +
  //     '//' +
  //     window.location.host +
  //     window.location.pathname +
  //     window.location.search;
  //   url = url.replace(/\(/g, '\\(');
  //   url = url.replace(/\)/g, '\\)');
  // }
  // Fix for when the base tag is used

  var svgCode = d3__WEBPACK_IMPORTED_MODULE_0__["select"]('#d' + id).node().innerHTML;

  if (!config.arrowMarkerAbsolute || config.arrowMarkerAbsolute === 'false') {
    svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
  }

  svgCode = decodeEntities(svgCode);

  if (typeof cb !== 'undefined') {
    switch (graphType) {
      case 'flowchart':
        cb(svgCode, _diagrams_flowchart_flowDb__WEBPACK_IMPORTED_MODULE_8__["default"].bindFunctions);
        break;

      case 'gantt':
        cb(svgCode, _diagrams_gantt_ganttDb__WEBPACK_IMPORTED_MODULE_14__["default"].bindFunctions);
        break;

      case 'class':
        cb(svgCode, _diagrams_class_classDb__WEBPACK_IMPORTED_MODULE_17__["default"].bindFunctions);
        break;

      default:
        cb(svgCode);
    }
  } else {
    _logger__WEBPACK_IMPORTED_MODULE_4__["logger"].debug('CB = undefined!');
  }

  var node = d3__WEBPACK_IMPORTED_MODULE_0__["select"]('#d' + id).node();

  if (node !== null && typeof node.remove === 'function') {
    d3__WEBPACK_IMPORTED_MODULE_0__["select"]('#d' + id).node().remove();
  }

  return svgCode;
}
Function that renders an svg with a graph from a chart definition. Usage example below.

```js
mermaidAPI.initialize({
     startOnLoad:true
 });
 $(function(){
     const graphDefinition = 'graph TB\na-->b';
     const cb = function(svgGraph){
         console.log(svgGraph);
     };
     mermaidAPI.render('id1',graphDefinition,cb);
 });
```
@param id the id of the element to be rendered
@param txt the graph definition
@param cb callback which is called after rendering is finished with the svg code as inparam.
@param container selector to element in which a div with the graph temporarily will be inserted. In one is
provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
completed.