{"id":5791,"date":"2023-10-04T19:45:00","date_gmt":"2023-10-04T17:45:00","guid":{"rendered":"https:\/\/graphizm.fr\/greta\/?p=5791"},"modified":"2023-10-04T19:51:26","modified_gmt":"2023-10-04T17:51:26","slug":"creer-cartes-mentales-avec-markmap","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/cours-annexes\/creer-cartes-mentales-avec-markmap\/","title":{"rendered":"Cr\u00e9er des cartes mentales avec Markmap"},"content":{"rendered":"\n<p class=\"has-subtle-background-background-color has-background\">Dans ce cours, vous allez apprendre \u00e0 utiliser l&rsquo;outil en ligne <a rel=\"noreferrer noopener\" href=\"https:\/\/markmap.js.org\" data-type=\"link\" data-id=\"https:\/\/markmap.js.org\" target=\"_blank\"><strong>Markmap<\/strong><\/a>. Cet outil permet de r\u00e9aliser des cartes mentales heuristiques \u00e0 partir d&rsquo;une simple structure textuelle \u00e9dit\u00e9e en langage Markdown.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6b6b6b;color:#6b6b6b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6b6b6b;color:#6b6b6b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/creer-cartes-mentales-avec-markmap\/#Anticiper_la_realisation\" >Anticiper la r\u00e9alisation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/creer-cartes-mentales-avec-markmap\/#Personnaliser_la_carte\" >Personnaliser la carte<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/cours-annexes\/creer-cartes-mentales-avec-markmap\/#Exporter_la_carte\" >Exporter la carte<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Anticiper_la_realisation\"><\/span>Anticiper la r\u00e9alisation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Comme pour tout projet de communication, <strong>il est important de bien pr\u00e9parer ses contenus<\/strong>. Dans notre contexte, nous allons livrer au public (publier) une carte mentale heuristique. Il s&rsquo;agit d&rsquo;une arborescence centr\u00e9e sur un sujet central \u00e0 partir duquel se ramifient des sujets secondaires sur plusieurs niveaux.<\/p>\n\n\n\n<p>Voici la carte mod\u00e8le propos\u00e9e par Markmap \u00e0 l&rsquo;ouverture de sa <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/markmap.js.org\/repl\" data-type=\"link\" data-id=\"https:\/\/markmap.js.org\/repl\" target=\"_blank\">fen\u00eatre d&rsquo;\u00e9dition<\/a><\/strong>. Le texte permettant de cr\u00e9er cette carte est le code Markdown plac\u00e9 dans la partie gauche de l&rsquo;\u00e9diteur.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/markmap-template.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"548\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/markmap-template.jpg\" alt=\"\" class=\"wp-image-5795\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/markmap-template.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/markmap-template-600x321.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/markmap-template-768x411.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>\u279c&nbsp;Pour vous aider \u00e0 concr\u00e9tiser ceci, <strong>je vous ai pr\u00e9par\u00e9 un document en MarkDown<\/strong> que vous allez traiter de la mani\u00e8re suivante&nbsp;:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>visualiser le code Markdown<\/strong> dans votre navigateur<\/li>\n\n\n\n<li><strong>s\u00e9lectionner ce code<\/strong> et placer le code dans le presse-papier (<strong>couper tout le texte<\/strong>)<\/li>\n\n\n\n<li><strong>coller le texte<\/strong> dans la fen\u00eatre d&rsquo;\u00e9dition de Markmap (apr\u00e8s avoir supprim\u00e9 le code de d\u00e9monstration propos\u00e9 \u00e0 l&rsquo;ouverture de l&rsquo;\u00e9diteur)<\/li>\n<\/ol>\n\n\n\n<p class=\"has-primary-background-color has-background\">Il est donc n\u00e9cessaire d&rsquo;avoir <strong>2 onglets ou fen\u00eatres de navigation ouvertes<\/strong> : celle qui pointe sur <strong><a href=\"https:\/\/graphizm.fr\/markdown\/code-md\/blog\/code-com-sensorielle-v1\" data-type=\"link\" data-id=\"https:\/\/graphizm.fr\/markdown\/code-md\/blog\/code-com-sensorielle-v1\" target=\"_blank\" rel=\"noreferrer noopener\">le code Markdown<\/a><\/strong> mis \u00e0 votre disposition) et celle qui pointe sur <strong><a href=\"https:\/\/markmap.js.org\/repl\" data-type=\"link\" data-id=\"https:\/\/markmap.js.org\/repl\">l&rsquo;\u00e9diteur de Markmap<\/a><\/strong>.<\/p>\n\n\n\n<p>\u279c&nbsp;Si vous avez suivi les consignes formul\u00e9es plus haut, vous devriez <strong>visualiser quelque chose qui ressemble \u00e0 ceci<\/strong> (avec les l\u00e9gendes en moins)&nbsp;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/exo-markmap-01.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"609\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/exo-markmap-01.jpg\" alt=\"\" class=\"wp-image-5799\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/exo-markmap-01.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/exo-markmap-01-600x357.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/exo-markmap-01-768x457.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p> La carte a \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9e automatiquement \u00e0 partir du code Markdown int\u00e9gr\u00e9 dans la fen\u00eatre d&rsquo;\u00e9dition de gauche. Nous ne sommes pas en pr\u00e9sence d&rsquo;un \u00e9diteur de code Markdown et <strong>nous ne disposons d&rsquo;aucun bouton pour mettre le texte en gras ou en italique<\/strong>. <\/p>\n\n\n\n<p>Nous observons par ailleurs que, sur la carte, les titres de niveau 1 (cod\u00e9s avec un <code>#<\/code>) ne sont pas plus gros que les titres de niveau 2 (cod\u00e9s avec deux <code>##<\/code>)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Personnaliser_la_carte\"><\/span>Personnaliser la carte <span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Je vous propose de <strong>personnaliser la carte en modifiant le code Markdown<\/strong> de mani\u00e8re \u00e0 obtenir le rendu pr\u00e9sent\u00e9 ci-dessous. Les fl\u00e8ches bleues indiquent les changements attendus.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/exo-markmap-02.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"501\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/exo-markmap-02.jpg\" alt=\"\" class=\"wp-image-5801\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/exo-markmap-02.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/exo-markmap-02-600x294.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/exo-markmap-02-768x376.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>L\u2019apparence de la carte peut \u00eatre \u00e9galement modifi\u00e9e <strong>en utilisant les fonctionnalit\u00e9s accessibles dans la barre d&rsquo;outils<\/strong> de l&rsquo;\u00e9diteur de carte. Vous pouvez par exemple <strong>unifier la couleur des branches<\/strong> de la carte en cliquant sur le lien (bouton) <code>Colorize<\/code>.<\/p>\n\n\n\n<p>Cette op\u00e9ration ajoute un <strong>ent\u00eate cod\u00e9 en langage YAML<\/strong> (utilis\u00e9 notamment pour int\u00e9grer des m\u00e9tadonn\u00e9es dans un fichier Markdown). Le code YAML est encadr\u00e9 par deux lignes de 3 tirets. dans notre cas, la couleur est indiqu\u00e9e en mode hexad\u00e9cimal. Vous pouvez la remplacer par toute autre couleur, <strong>cod\u00e9e de la m\u00eame mani\u00e8re<\/strong>, ou par le nom d&rsquo;une <strong>couleur Web<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/exo-markmap-03.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"644\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/exo-markmap-03.jpg\" alt=\"\" class=\"wp-image-5803\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/exo-markmap-03.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/exo-markmap-03-600x377.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/exo-markmap-03-768x483.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Exporter_la_carte\"><\/span>Exporter la carte<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>La carte ainsi g\u00e9n\u00e9r\u00e9e est exportable dans deux formats. Un export <strong>HTML<\/strong> interactif (consultable avec un navigateur et int\u00e9grable dans une page Web) et un export <strong>SVG<\/strong> (consultable avec un navigateur et int\u00e9grable dans une page Web, mais non interactif).<\/p>\n\n\n\n<p>Le lien suivant pointe vers la carte personnalis\u00e9e, mise en ligne sur un serveur distant&nbsp;: <a href=\"http:\/\/graphizm.fr\/markdown\/exo-markmap-03.html\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/graphizm.fr\/markdown\/exo-markmap-03.html<\/a><\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">Ces deux fonctions d&rsquo;exportation <strong>fonctionnent tr\u00e8s bien avec Google Chrome<\/strong> mais font planter <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/vivaldi.com\/fr\/\" data-type=\"link\" data-id=\"https:\/\/vivaldi.com\/fr\/\" target=\"_blank\">Vivaldi<\/a> <\/strong>que j&rsquo;utilise malgr\u00e9 tout quotidiennement&#8230; pour tout le reste \ud83d\ude09<\/p>","protected":false},"excerpt":{"rendered":"<p>Dans ce cours, vous allez apprendre \u00e0 utiliser l&rsquo;outil en ligne Markmap. Cet outil permet de r\u00e9aliser des cartes mentales heuristiques \u00e0 partir d&rsquo;une simple structure textuelle \u00e9dit\u00e9e en langage Markdown. Anticiper la r\u00e9alisation Comme pour tout projet de communication, il est important de bien pr\u00e9parer ses contenus. Dans notre contexte, nous allons livrer au [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-5791","post","type-post","status-publish","format-standard","hentry","category-cours-annexes"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Dans ce cours, vous allez apprendre \u00e0 utiliser l&rsquo;outil en ligne Markmap. Cet outil permet de r\u00e9aliser des cartes mentales heuristiques \u00e0 partir d&rsquo;une simple structure textuelle \u00e9dit\u00e9e en langage Markdown. Sommaire Toggle Anticiper la r\u00e9alisationPersonnaliser la carteExporter la carte Anticiper la r\u00e9alisation Comme pour tout projet de communication, il est important de bien pr\u00e9parer ses contenus. Dans notre contexte, nous allons livrer au public (publier) une carte mentale heuristique. Il s&rsquo;agit d&rsquo;une arborescence centr\u00e9e sur un sujet central \u00e0 partir duquel se ramifient des sujets secondaires sur plusieurs niveaux. Voici la carte mod\u00e8le propos\u00e9e par Markmap \u00e0 l&rsquo;ouverture de\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/cours-annexes\/\" rel=\"category tag\">Cours annexes<\/a>","author_info_v2":{"name":"Yves Goguely","url":"https:\/\/graphizm.fr\/greta\/author\/formationsgreta\/"},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/5791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/comments?post=5791"}],"version-history":[{"count":6,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/5791\/revisions"}],"predecessor-version":[{"id":5804,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/5791\/revisions\/5804"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=5791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=5791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=5791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}