diff --git a/src/Bundle/ChillPersonBundle/DependencyInjection/ChillPersonExtension.php b/src/Bundle/ChillPersonBundle/DependencyInjection/ChillPersonExtension.php
index 684813c76..ea23f2b4b 100644
--- a/src/Bundle/ChillPersonBundle/DependencyInjection/ChillPersonExtension.php
+++ b/src/Bundle/ChillPersonBundle/DependencyInjection/ChillPersonExtension.php
@@ -900,7 +900,28 @@ class ChillPersonExtension extends Extension implements PrependExtensionInterfac
                             ]
                         ],
                     ]
-                ]
+                ],
+                [
+                    'class' => \Chill\PersonBundle\Entity\Relationships\Relation::class,
+                    'controller' => \Chill\PersonBundle\Controller\RelationshipApiController::class,
+                    'name' => 'relations',
+                    'base_path' => '/api/1.0/relations/relation',
+                    'base_role' => 'ROLE_USER',
+                    'actions' => [
+                        '_index' => [
+                            'methods' => [
+                                Request::METHOD_GET => true,
+                                Request::METHOD_HEAD => true
+                            ],
+                        ],
+                        '_entity' => [
+                            'methods' => [
+                                Request::METHOD_GET => true,
+                                Request::METHOD_HEAD => true
+                            ]
+                        ],
+                    ]
+                ],
             ]
         ]);
     }
diff --git a/src/Bundle/ChillPersonBundle/Entity/Relationships/Relation.php b/src/Bundle/ChillPersonBundle/Entity/Relationships/Relation.php
index 7628863fe..d8cbb3898 100644
--- a/src/Bundle/ChillPersonBundle/Entity/Relationships/Relation.php
+++ b/src/Bundle/ChillPersonBundle/Entity/Relationships/Relation.php
@@ -20,6 +20,7 @@ class Relation
      * @ORM\Id
      * @ORM\GeneratedValue
      * @ORM\Column(type="integer")
+     * @Serializer\Groups({"read"})
      */
     private ?int $id = null;
 
@@ -78,7 +79,7 @@ class Relation
     public function setIsActive(?bool $isActive): self
     {
         $this->isActive = $isActive;
-        
+
         return $this;
     }
-}
\ No newline at end of file
+}
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
index 11b889a2b..a544583f1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
@@ -1,9 +1,14 @@
 <template>
+
+   <!-- TEST appelle la fonction sans passer par le callback de vis-network -->
+   <button class="btn btn-sm btn-create" @click="addRelationshipModal({ from: 'person_1617', to: 'person_1614' })">add link</button>
+   <!--// <=== InternalError: too much recursion -->
+
    <div id="visgraph"></div>
 
    <teleport to="#visgraph-legend">
       <div class="my-4 post-menu legend">
-         <h3>{{ $t('visgraph.Legend')}}</h3>
+         <h3>{{ $t('visgraph.Legend') }}</h3>
          <div class="list-group">
             <label class="list-group-item" v-for="layer in legendLayers">
                <input
@@ -24,45 +29,74 @@
       <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
          <template v-slot:header>
             <h2 class="modal-title">{{ $t(modal.title) }}</h2>
+            <!-- {{ modal.data.id }} -->
          </template>
          <template v-slot:body>
             <div v-if="modal.action === 'delete'">
-               <p>
-                  {{ $t('visgraph.delete_confirmation_text') }}
-               </p>
+               <p>{{ $t('visgraph.delete_confirmation_text') }}</p>
             </div>
             <div v-else>
                <form>
-                  {{ modal.data.id }}
                   <div class="row">
+                     <div class="col-12 text-center">entre<br>et</div>
                      <div class="col">
-                        {{ modal.data.from }}
+                        <h4>
+                           {{ getPerson(modal.data.from).text }}
+                        </h4>
+                        <p class="text-start" v-if="relation && relation.title">
+                        <span v-if="reverse">
+                           {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.from).text, getPerson(modal.data.to).text, relation.reverseTitle.fr.toLowerCase() ])}}
+                        </span>
+                           <span v-else>
+                           {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.from).text, getPerson(modal.data.to).text, relation.title.fr.toLowerCase() ])}}
+                        </span>
+                        </p>
                      </div>
                      <div class="col text-end">
-                        {{ modal.data.to }}
+                        <h4>
+                           {{ getPerson(modal.data.to).text }}
+                        </h4>
+                        <p class="text-end" v-if="relation && relation.title">
+                        <span v-if="reverse">
+                           {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.title.fr.toLowerCase() ])}}
+                        </span>
+                           <span v-else>
+                           {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.reverseTitle.fr.toLowerCase() ])}}
+                        </span>
+                        </p>
                      </div>
                   </div>
-                  <div><!--
+                  <div class="my-3"><!--
+                        :value="relation"
+                     -->
                      <VueMultiselect
-                        id="relationshipLink"
+                        id="relation"
+                        label="title"
+                        track-by="id"
+                        :custom-label="customLabel"
                         :placeholder="$t('Choisissez le lien de parenté')"
-                        :options="relationLinks"
-                        v-model="relationshipLink"
+                        :close-on-select="true"
+                        :multiple="false"
+                        :searchable="true"
+                        :options="relations"
+                        v-model="relation"
                         >
                      </VueMultiselect>
-                     -->
                   </div>
-                  <p>
-                     phrase
-                  </p>
-                  <div>
-                     toggle reverse
+                  <div class="form-check form-switch">
+                     <input
+                        class="form-check-input"
+                        type="checkbox"
+                        id="reverse"
+                        v-model="reverse"
+                        >
+                     <label class="form-check-label" for="reverse">{{ $t('visgraph.reverse_relation') }}</label>
                   </div>
                </form>
             </div>
          </template>
          <template v-slot:footer>
-            <button class="btn" :class="modal.button.class" @click="modal.showModal = false">
+            <button class="btn" :class="modal.button.class" @click="submitRelationship">
                {{ $t(modal.button.text)}}</button>
          </template>
       </modal>
@@ -75,6 +109,7 @@ import vis from 'vis-network/dist/vis-network'
 import { mapState, mapGetters } from "vuex"
 import Modal from 'ChillMainAssets/vuejs/_components/Modal'
 import VueMultiselect from 'vue-multiselect'
+import { getRelationsList, postRelationship } from "./api";
 
 export default {
    name: "App",
@@ -86,9 +121,12 @@ export default {
       return {
          container: '',
          checkedLayers: [],
+         relations: [],
+         relation: null,
+         reverse: false,
          modal: {
             showModal: false,
-            modalDialogClass: "modal-dialog-scrollable modal-md",
+            modalDialogClass: "modal-md",
             title: null,
             action: null,
             data: {},
@@ -101,9 +139,8 @@ export default {
    },
    computed: {
       ...mapGetters(['nodes', 'edges']),
-      ...mapState(['households', 'courses', 'excludedNodesIds',
-         // not used
-         'persons', 'links', 'relationships', 'personLoadedIds', 'householdLoadingIds', 'courseLoadedIds', 'relationshipLoadedIds',
+      ...mapState(['households', 'courses', 'excludedNodesIds', 'persons',
+         // not used 'links', 'relationships', 'personLoadedIds', 'householdLoadingIds', 'courseLoadedIds', 'relationshipLoadedIds',
       ]),
 
       visgraph_data() {
@@ -141,7 +178,28 @@ export default {
 
       checkedLayers() { // required to refresh data checkedLayers
          return this.checkedLayers
-      }
+      },
+
+      relation: {
+         get() {
+            return this.relation
+         },
+         set(value) {
+            //console.log('setter relation', value) // <=== InternalError: too much recursion
+            this.relation = value
+         }
+      },
+
+      reverse: {
+         get() {
+            return this.reverse
+         },
+         set(value) {
+            //console.log('setter reverse', value) // <=== InternalError: too much recursion
+            this.reverse = value
+         }
+      },
+
 
    },
    created() {
@@ -157,6 +215,7 @@ export default {
    mounted() {
       console.log('=== mounted: init graph')
       this.initGraph()
+      this.getRelationsList()
    },
    methods: {
       initGraph() {
@@ -191,8 +250,8 @@ export default {
       },
 
       addRelationshipModal(edgeData) {
-         console.log('==> addRelationshipModal <=======================', edgeData)
          this.modal.data = edgeData
+         console.log('==- addRelationshipModal', edgeData) // { from: "person_1617", to: "person_1614" }
          this.modal.action = 'create'
          this.modal.title = 'visgraph.add_relationship_link'
          this.modal.button.class = 'btn-create'
@@ -200,8 +259,8 @@ export default {
          this.modal.showModal = true
       },
       editRelationshipModal(edgeData) {
-         console.log('==> editRelationshipModal <=======================', edgeData)
          this.modal.data = edgeData
+         console.log('==- editRelationshipModal', edgeData)
          this.modal.action = 'edit'
          this.modal.title = 'visgraph.edit_relationship_link'
          this.modal.button.class = 'btn-edit'
@@ -209,40 +268,62 @@ export default {
          this.modal.showModal = true
       },
       deleteRelationshipModal(edgeData) {
-         console.log('==> deleteRelationshipModal <=======================', edgeData)
          this.modal.data = edgeData
+         console.log('==- deleteRelationshipModal', edgeData)
          this.modal.action = 'delete'
          this.modal.title = 'visgraph.delete_relationship_link'
          this.modal.button.class = 'btn-delete'
          this.modal.button.text = 'action.delete'
          this.modal.showModal = true
       },
+      resetForm() {
+         console.log('==- reset Form')
+         this.modal.data = {}
+         this.modal.action = null
+         this.modal.title = null
+         this.modal.button.class = null
+         this.modal.button.text = null
+      },
 
-      relationLinks() {
-         console.log('fetch relationLinks')
-         return getRelations().then(relationsList => new Promise(resolve => {
-            console.log('relationsList', relationsList)
+      getRelationsList() {
+         console.log('fetch relationsList')
+         return getRelationsList().then(relations => new Promise(resolve => {
+            console.log('+ relations list', relations.results.filter(r => r.isActive === true))
+            this.relations = relations.results
             resolve()
          })).catch()
       },
-   }
-/*
-   TODO / TO CHECK / TO UNDERSTAND
+      customLabel(value) {
+         console.log('customLabel', value)
+         return (value.title && value.reverseTitle) ? `${value.title.fr} ↔ ${value.reverseTitle.fr}` : ''
+      },
+      getPerson(idtext) {
+         let person = this.persons.filter(p => p.id === idtext)
+         return person[0]
+      },
 
-   ///// A
-   new vis.Network(), param 2: why we don't need to instanciate node and edges with new vis.DataSet like in example ?
-   {
-      nodes: new vis.DataSet(this.nodes),
-      edges: new vis.DataSet(this.relationships)
+      submitRelationship() {
+         console.log('submitRelationship')
+         if (this.modal.action !== 'delete') {
+            return postRelationship(
+               this.getPerson(this.modal.data.from), this.getPerson(this.modal.data.to), this.relation, this.reverse
+            )
+            .then(response => new Promise(resolve => {
+               console.log('', response)
+               modal.showModal = false
+               this.resetForm()
+               resolve()
+            }))
+            .catch()
+         }
+      }
    }
-   ///// B
-   refreshNetwork() computed: need to watch/listen event to force refreshing ?
-
-*/
 }
 </script>
 
 <style src="vis-network/dist/dist/vis-network.min.css"></style>
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
 <style lang="scss" scoped>
 div#visgraph {
    margin: 2em auto;
@@ -253,4 +334,7 @@ div#visgraph-legend {
    div.post-menu.legend {
    }
 }
+.modal-mask {
+   background-color: rgba(0, 0, 0, 0.25);
+}
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
index 5533bd6ff..0c5d06bff 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
@@ -111,19 +111,30 @@ const getRelationshipsByPerson = (person) => {
 }
 
 /**
- * @function postRelationship
- * @param person
+ * Return list of relations
  * @returns {Promise<Response>}
  */
-const postRelationship = (person) => {
-    //console.log('postRelationship', person.id)
+const getRelationsList = () => {
+    return getFetch(`/api/1.0/relations/relation.json`)
+}
+
+/**
+ * @function postRelationship
+ * @param fromPerson
+ * @param toPerson
+ * @param relation
+ * @param reverse
+ * @returns {Promise<Response>}
+ */
+const postRelationship = (fromPerson, toPerson, relation, reverse) => {
     return postFetch(
         `/api/1.0/relations/relationship.json`,
         {
-            from: { type: 'person', id: 0 },
-            to: { type: 'person', id: 0 },
-            relation: { type: 'relation', id: 0 },
-            reverse: bool
+            type: 'relationship',
+            fromPerson: { type: 'person', id: fromPerson._id },
+            toPerson: { type: 'person', id: toPerson._id },
+            relation: { type: 'relation', id: relation.id },
+            reverse: reverse
         }
     )
 }
@@ -132,5 +143,6 @@ export {
     getHouseholdByPerson,
     getCoursesByPerson,
     getRelationshipsByPerson,
-    postRelationship
+    getRelationsList,
+    postRelationship,
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
index faa2b3446..e18ca69be 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
@@ -15,14 +15,16 @@ const visMessages = {
             edit_relationship_link: "Modifier le lien de filiation",
             delete_relationship_link: "Êtes-vous sûr ?",
             delete_confirmation_text: "Vous allez supprimer le lien entre ces 2 usagers.",
+            reverse_relation: "Inverser la relation",
+            relation_from_to_like: "{2} de {1}", // disable {0}
         },
         edit: 'Éditer',
         del: 'Supprimer',
         back: 'Revenir en arrière',
         addNode: 'Ajouter un noeuds',
-        addEdge: 'Ajouter un lien',
-        editNode: 'Éditer un noeuds',
-        editEdge: 'Éditer un lien',
+        addEdge: 'Ajouter un lien de filiation',
+        editNode: 'Éditer le noeuds',
+        editEdge: 'Éditer le lien',
         addDescription: 'Cliquez dans un espace vide pour créer un nouveau nœud.',
         edgeDescription: 'Cliquez sur un usager et faites glisser le lien vers un autre usager pour les connecter.',
         editEdgeDescription: 'Cliquez sur les points de contrôle et faites-les glisser vers un nœud pour les relier.',
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js
index 772af6630..5470d07f9 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js
@@ -152,7 +152,7 @@ const store = createStore({
                     .then(household => new Promise(resolve => {
                         //console.log('getHouseholdByPerson', household)
                         commit('addHousehold', adapt2vis(household))
-                        commit('addExcludedNode', household.id)
+                        //commit('addExcludedNode', household.id)
                         dispatch('addLinkFromPersonsToHousehold', household)
                         resolve()
                         })
@@ -290,7 +290,7 @@ const store = createStore({
             commit('addLink', {
                 from: `person_${r.fromPerson.id}`,
                 to: `person_${r.toPerson.id}`,
-                id: 'r' + r.id + '_p' + r.fromPerson.id + '_p' + r.toPerson.id,
+                id: 'r' + splitId(r.id,'id') + '_p' + r.fromPerson.id + '_p' + r.toPerson.id,
                 arrows: 'to',
                 color: 'lightblue',
                 font: { color: '#33839d' },
@@ -315,7 +315,7 @@ const store = createStore({
             commit('markPersonLoaded', person.id)
             commit('addPerson', adapt2vis(person, { folded: true }))
 
-            console.log('********* fetch infos for missing', person.id, '******')
+            console.log('   fetch infos for missing', person.id)
             //dispatch('fetchInfoForPerson', person)
         },
     }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js
index 9824e9f79..b43ab30d2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js
@@ -39,8 +39,8 @@ window.options = {
             theta: 0.5,
             gravitationalConstant: -50,
             centralGravity: 0.01,
-            springConstant: 0.08,
             springLength: 100,
+            springConstant: 0.08,
             damping: 0.4,
             avoidOverlap: 0
         },
@@ -61,7 +61,7 @@ window.options = {
         },
         maxVelocity: 50,
         minVelocity: 0.1,
-        solver: 'barnesHut',
+        solver: 'forceAtlas2Based', //'barnesHut', //
         stabilization: {
             enabled: true,
             iterations: 1000,
@@ -85,11 +85,8 @@ window.options = {
     },
     manipulation: {
         enabled: true,
-        initiallyActive: true,
-        addNode: function(nodeData, callback) {
-            console.log('addNode', nodeData)
-            //callback(nodeData) disabled
-        },
+        initiallyActive: false,
+        addNode: false,
         editNode: function(nodeData, callback) {
             console.log('editNode', nodeData)
             //callback(nodeData) disabled
diff --git a/src/Bundle/ChillPersonBundle/chill.api.specs.yaml b/src/Bundle/ChillPersonBundle/chill.api.specs.yaml
index ab55d052a..241febd36 100644
--- a/src/Bundle/ChillPersonBundle/chill.api.specs.yaml
+++ b/src/Bundle/ChillPersonBundle/chill.api.specs.yaml
@@ -307,7 +307,7 @@ components:
             - $ref: "#/components/schemas/RelationById"
         reverse:
           type: boolean
-          
+
 
 paths:
   /1.0/person/person/{id}.json:
@@ -1093,7 +1093,7 @@ paths:
           description: "OK"
         400:
           description: "transition cannot be applyed"
-  
+
   /1.0/person/accompanying-course/by-person/{person_id}.json:
     get:
       tags:
@@ -1647,7 +1647,7 @@ paths:
           description: "OK"
         400:
           description: "Bad Request"
-  
+
   /1.0/relations/relationship.json:
     post:
       tags:
@@ -1671,3 +1671,14 @@ paths:
           description: "Unauthorized"
         422:
           description: "Invalid data: the data is a valid json, could be deserialized, but does not pass validation"
+
+  /1.0/relations/relation.json:
+    get:
+      tags:
+        - relationships
+      summary: get a list of relations
+      responses:
+        401:
+          description: "Unauthorized"
+        200:
+          description: "OK"