---
title: Routing tree editor
sort_rank: 4
nav_icon: sliders
---
<style>
.routing-table {
  font: 12px sans-serif;
}

.node circle {
  stroke: #e6522c;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

.form-control.label-input {
  padding: 2px;
  width: 450px;
}

textarea {
  border-color: #ddd;
  height: 450px;
  padding: 2px 0;
  width: 100%;
  font-family: monospace;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

</style>

<h1 id="routing-tree-editor" class="page-header">
  Routing tree editor
  <a class="header-anchor" href="#routing-tree-editor" name="routing-tree-editor"></a>
</h1>

<div class="form-group">
  <p class="block">Copy and paste your Alertmanager config.yml:</p>
  <div class="form-group">
    <textarea class="js-config-yml form-control" cols="50" rows="10"></textarea>
  </div>
  <button type="button" class="js-parse-and-draw btn btn-default">Draw Routing Tree</button>
</div>
<div class="form-inline">
  <div class="form-group">
      <div class="form-group">
      <input class="label-input form-control" type="text" placeholder='{service="foo-service", severity="critical"}' \>
    </div>
    <button type="button" class="js-find-match btn btn-default">Match Label Set</button>
  </div>
</div>
<script src="/assets/d3.v3.min.js"></script>
<script src="/assets/js-yaml.min.js"></script>
<script src="/assets/routing-tree.js"></script>