typort快捷键+常用表情+画图
Typort快捷键
详细完整Tyoprt快捷键、表情、画图
这里列举Typort的快捷键以方便使用，不过没有举例说明，请谅解。
| 快捷键 | 描述 | 快捷键 | 描述 |
|---|---|---|---|
| Ctrl+A | 全选 | Alt+Shift+5 | 删除线 |
| Ctrl+B | 加粗 | Ctrl+Shift+` | 着重 |
| Ctrl+C | 复制 | Ctrl+Shift+K | 代码块 |
| Ctrl+D | 选中当前词 | Ctrl+Shift+M | 公式块 |
| Ctrl+E | 选中当前格式文本 | Ctrl+Shift+S | 另存为 |
| Ctrl+F | 查找 | Ctrl+Shift+Q | 引用 |
| Ctrl+H | 替换 | Ctrl+Shift+I | 插入图像 |
| Ctrl+I | 斜体 | Ctrl+Shift+L | 显示隐藏侧边栏 |
| Ctrl+J | 跳转到所选内容 | Ctrl+Shift+0 | 图片实际大小 |
| Ctrl+K | 超链接 | Ctrl+Shift+1 | 大纲视图 |
| Ctrl+L | 选中当前行/句 | Ctrl+Shift+2 | 文档列表视图 |
| Ctrl+N | 新建文件 | Ctrl+Shift+3 | 文件树视图 |
| Ctrl+O | 打开 | Ctrl+Shift+= | 视图放大 |
| Ctrl+P | 快速打开 | Ctrl+Shift+ - | 视图缩小 |
| Ctrl+S | 保存 | F3 | 查找下一个 |
| Ctrl+T | 表格 | Shift+F3 | 查找上一个 |
| Ctrl+U | 下划线 | F8 | 专注模式 |
| Ctrl+V | 粘贴 | F9 | 打字机模式 |
| Ctrl+W | 关闭 | F11 | 切换全屏 |
| Ctrl+X | 剪切 | Shift+F12 | 打开DevTools |
| Ctrl+Z | 撤销 | alt+F | 菜单栏文件 |
| Ctrl+Home | 跳转到文首 | alt+E | 菜单栏编辑 |
| Ctrl+End | 跳转到文末 | alt+P | 菜单栏段落 |
| Ctrl+Tab | 应用内窗口切换 | alt+O | 菜单栏格式 |
| Ctrl+‘+’ | 增加标题级别 | alt+V | 菜单栏视图 |
| Ctrl+‘-’ | 减少标题级别 | alt+T | 菜单栏主题 |
| Ctrl+, | 偏好 | alt+H | 菜单栏帮助 |
| Ctrl+ | 清除样式 | \ | 转义 |
| Ctrl+] | 增加缩进 | + or - or * | 无序列表 |
| Ctrl+[ | 减少缩进 | 数字. | 有序列表 |
| Ctrl+/ | 源代码模式 | [TOC] + enter | 生成目录 |
| Ctrl+0 | 段落 | > | 引用 |
| Ctrl+1/2/3/4/5/6 | 标题 | — or *** or * * * or - - - | 分割线 |
| Ctrl+Shift+[ | 有序列表 | $$ + enter | 数学公式 |
| Ctrl+Shift+] | 无序列表 | : + 单词 + : | 表情 |
| Ctrl+Shift+C | 复制为MarkDown | 内容 | 下标 |
| Ctrl+Shift+V | 粘贴为纯文本 | 内容 | 上标 |
| Ctrl+Shift+N | 新建窗口 | [+^+脚注] | 脚注 |
| ==内容== | 高亮 | 居中 | |
| +内容+ | 淡化 | 右对齐 |
右对齐 |
| enter or |
换行 | 左对齐 |
左对齐 |
| *文字* or _文字_ | 斜体文本 | **文字** or __文字__ | 粗体文本 |
| ***文字*** or ___粗斜体文本___ | 粗斜体文本 | ~~hello~~ | 删除线 |
| 带下划线文本 | 带下划线文本 | Ctrl | 使用方块包裹 |
| hello | 斜体 | hello | 粗体 |
| hello | 斜体 强调文本 | 不断行的空白格 | |
| 相当全角状态键入半个“空格”键 | 相当全角状态键入“空格”键 |
People
:smile: |
:laughing: |
:tired_face: |
|---|---|---|
:blush: |
:smiley: |
☺️ :relaxed: |
:smirk: |
:heart_eyes: |
:kissing_heart: |
:kissing_closed_eyes: |
:flushed: |
:relieved: |
:satisfied: |
:grin: |
:wink: |
:stuck_out_tongue_winking_eye: |
:stuck_out_tongue_closed_eyes: |
:grinning: |
:kissing: |
:kissing_smiling_eyes: |
:stuck_out_tongue: |
:sleeping: |
:worried: |
:frowning: |
:anguished: |
:open_mouth: |
:grimacing: |
:confused: |
:hushed: |
:expressionless: |
:unamused: |
:sweat_smile: |
:sweat: |
:disappointed_relieved: |
:weary: |
:pensive: |
:disappointed: |
:confounded: |
:fearful: |
:cold_sweat: |
:persevere: |
:cry: |
:sob: |
:joy: |
:astonished: |
:scream: |
||
:angry: |
:rage: |
:triumph: |
:sleepy: |
:yum: |
:mask: |
:sunglasses: |
:dizzy_face: |
:imp: |
:smiling_imp: |
:neutral_face: |
:no_mouth: |
:innocent: |
:alien: |
:yellow_heart: |
:blue_heart: |
:purple_heart: |
❤️ :heart: |
:green_heart: |
:broken_heart: |
:heartbeat: |
:heartpulse: |
:two_hearts: |
:revolving_hearts: |
:cupid: |
:sparkling_heart: |
✨ :sparkles: |
⭐️ :star: |
:star2: |
:dizzy: |
:boom: |
:collision: |
:anger: |
❗️ :exclamation: |
❓ :question: |
❕ :grey_exclamation: |
❔ :grey_question: |
:zzz: |
:dash: |
:sweat_drops: |
:notes: |
:musical_note: |
:fire: |
:hankey: |
:poop: |
:shit: |
:+1: |
:thumbsup: |
:-1: |
:thumbsdown: |
:ok_hand: |
:punch: |
:facepunch: |
✊ :fist: |
✌️ :v: |
:wave: |
✋ :hand: |
✋ :raised_hand: |
:open_hands: |
☝️ :point_up: |
:point_down: |
:point_left: |
:point_right: |
:raised_hands: |
:pray: |
:point_up_2: |
:clap: |
:muscle: |
:metal: |
:fu: |
:walking: |
:runner: |
:running: |
:couple: |
:family: |
:two_men_holding_hands: |
:two_women_holding_hands: |
:dancer: |
:dancers: |
:ok_woman: |
:no_good: |
:information_desk_person: |
:raising_hand: |
:bride_with_veil: |
:person_with_pouting_face: |
:person_frowning: |
:bow: |
:couplekiss: :couplekiss: |
:couple_with_heart: |
:massage: |
:haircut: |
:nail_care: |
:boy: |
:girl: |
:woman: |
:man: |
:baby: |
:older_woman: |
:older_man: |
:person_with_blond_hair: |
:man_with_gua_pi_mao: |
:man_with_turban: |
:construction_worker: |
:cop: |
:angel: |
:princess: |
:smiley_cat: |
:smile_cat: |
:heart_eyes_cat: |
:kissing_cat: |
:smirk_cat: |
:scream_cat: |
:crying_cat_face: |
:joy_cat: |
:pouting_cat: |
:japanese_ogre: |
:japanese_goblin: |
:see_no_evil: |
:hear_no_evil: |
:speak_no_evil: |
:guardsman: |
:skull: |
:feet: |
:lips: |
:kiss: |
:droplet: |
:ear: |
:eyes: |
:nose: |
:tongue: |
:love_letter: |
:bust_in_silhouette: |
:busts_in_silhouette: |
:speech_balloon: |
:thought_balloon: |
Nature
☀️ :sunny: |
☔️ :umbrella: |
☁️ :cloud: |
|---|---|---|
❄️ :snowflake: |
⛄️ :snowman: |
⚡️ :zap: |
:cyclone: |
:foggy: |
:ocean: |
:cat: |
:dog: |
:mouse: |
:hamster: |
:rabbit: |
:wolf: |
:frog: |
:tiger: |
:koala: |
:bear: |
:pig: |
:pig_nose: |
:cow: |
:boar: |
:monkey_face: |
:monkey: |
:horse: |
:racehorse: |
:camel: |
:sheep: |
:elephant: |
:panda_face: |
:snake: |
:bird: |
:baby_chick: |
:hatched_chick: |
:hatching_chick: |
:chicken: |
:penguin: |
:turtle: |
:bug: |
:honeybee: |
:ant: |
:beetle: |
:snail: |
:octopus: |
:tropical_fish: |
:fish: |
:whale: |
:whale2: |
:dolphin: |
:cow2: |
:ram: |
:rat: |
:water_buffalo: |
:tiger2: |
:rabbit2: |
:dragon: |
:goat: |
:rooster: |
:dog2: |
:pig2: |
:mouse2: |
:ox: |
:dragon_face: |
:blowfish: |
:crocodile: |
:dromedary_camel: |
:leopard: |
:cat2: |
:poodle: |
:paw_prints: |
:bouquet: |
:cherry_blossom: |
:tulip: |
:four_leaf_clover: |
:rose: |
:sunflower: |
:hibiscus: |
:maple_leaf: |
:leaves: |
:fallen_leaf: |
:herb: |
:mushroom: |
:cactus: |
:palm_tree: |
:evergreen_tree: |
:deciduous_tree: |
:chestnut: |
:seedling: |
:blossom: |
:ear_of_rice: |
:shell: |
:globe_with_meridians: |
:sun_with_face: |
:full_moon_with_face: |
:new_moon_with_face: |
:new_moon: |
:waxing_crescent_moon: |
:first_quarter_moon: |
:waxing_gibbous_moon: |
:full_moon: |
:waning_gibbous_moon: |
:last_quarter_moon: |
:waning_crescent_moon: |
:last_quarter_moon_with_face: |
:first_quarter_moon_with_face: |
:moon: |
:earth_africa: |
:earth_americas: |
:earth_asia: |
:volcano: |
:milky_way: |
⛅️ :partly_sunny: |
Object
:bamboo: |
:gift_heart: |
:dolls: |
|---|---|---|
:school_satchel: |
:mortar_board: |
:flags: |
:fireworks: |
:sparkler: |
:wind_chime: |
:rice_scene: |
:jack_o_lantern: |
:ghost: |
:santa: |
:christmas_tree: |
:gift: |
:bell: |
:no_bell: |
:tanabata_tree: |
:tada: |
:confetti_ball: |
:balloon: |
:crystal_ball: |
:cd: |
:dvd: |
:floppy_disk: |
:camera: |
:video_camera: |
:movie_camera: |
:computer: |
:tv: |
:iphone: |
☎️ :phone: |
☎️ :telephone: |
:telephone_receiver: |
:pager: |
:fax: |
:minidisc: |
:vhs: |
:sound: |
:speaker: |
:mute: |
:loudspeaker: |
:mega: |
⌛️ :hourglass: |
⏳ :hourglass_flowing_sand: |
⏰ :alarm_clock: |
⌚️ :watch: |
:radio: |
:satellite: |
➿ :loop: |
:mag: |
:mag_right: |
:unlock: |
:lock: |
:lock_with_ink_pen: |
:closed_lock_with_key: |
:key: |
:bulb: |
:flashlight: |
:high_brightness: |
:low_brightness: |
:electric_plug: |
:battery: |
:calling: |
✉️ :email: |
:mailbox: |
:postbox: |
:bath: |
:bathtub: |
:shower: |
:toilet: |
:wrench: |
:nut_and_bolt: |
:hammer: |
:seat: |
:moneybag: |
:yen: |
:dollar: |
:pound: |
:euro: |
:credit_card: |
:money_with_wings: |
:e-mail: |
:inbox_tray: |
:outbox_tray: |
✉️ :envelope: |
:incoming_envelope: |
:postal_horn: |
:mailbox_closed: |
:mailbox_with_mail: |
:mailbox_with_no_mail: |
:door: |
:smoking: |
:bomb: |
:gun: |
:hocho: |
:pill: |
:syringe: |
:page_facing_up: |
:page_with_curl: |
:bookmark_tabs: |
:bar_chart: |
:chart_with_upwards_trend: |
:chart_with_downwards_trend: |
:scroll: |
:clipboard: |
:calendar: |
:date: |
:card_index: |
:file_folder: |
:open_file_folder: |
✂️ :scissors: |
:pushpin: |
:paperclip: |
✒️ :black_nib: |
✏️ :pencil2: |
:straight_ruler: |
:triangular_ruler: |
:closed_book: |
:green_book: |
:blue_book: |
:orange_book: |
:notebook: |
:notebook_with_decorative_cover: |
:ledger: |
:books: |
:bookmark: |
:name_badge: |
:microscope: |
:telescope: |
:newspaper: |
:football: |
:basketball: |
⚽️ :soccer: |
⚾️ :baseball: |
:tennis: |
:8ball: |
:rugby_football: |
:bowling: |
⛳️ :golf: |
:mountain_bicyclist: |
:bicyclist: |
:horse_racing: |
:snowboarder: |
:swimmer: |
:surfer: |
:ski: |
♠️ :spades: |
♥️ :hearts: |
♣️ :clubs: |
♦️ :diamonds: |
:gem: |
:ring: |
:trophy: |
:musical_score: |
:musical_keyboard: |
:violin: |
:space_invader: |
:video_game: |
:black_joker: |
:flower_playing_cards: |
:game_die: |
:dart: |
️ :mahjong: |
:clapper: |
:memo: |
:pencil: |
:book: |
:art: |
:microphone: |
:headphones: |
:trumpet: |
:saxophone: |
:guitar: |
:shoe: |
:sandal: |
:high_heel: |
:lipstick: |
:boot: |
:shirt: |
:tshirt: |
:necktie: |
:womans_clothes: |
:dress: |
:running_shirt_with_sash: |
:jeans: |
:kimono: |
:bikini: |
:ribbon: |
:tophat: |
:crown: |
:womans_hat: |
:mans_shoe: |
:closed_umbrella: |
:briefcase: |
:handbag: |
:pouch: |
:purse: |
:eyeglasses: |
:fishing_pole_and_fish: |
☕️ :coffee: |
:tea: |
:sake: |
:baby_bottle: |
:beer: |
:beers: |
:cocktail: |
:tropical_drink: |
:wine_glass: |
:fork_and_knife: |
:pizza: |
:hamburger: |
:fries: |
:poultry_leg: |
:meat_on_bone: |
:spaghetti: |
:curry: |
:fried_shrimp: |
:bento: |
:sushi: |
:fish_cake: |
:rice_ball: |
:rice_cracker: |
:rice: |
:ramen: |
:stew: |
:oden: |
:dango: |
:egg: |
:bread: |
:doughnut: |
:custard: |
:icecream: |
:ice_cream: |
:shaved_ice: |
:birthday: |
:cake: |
:cookie: |
:chocolate_bar: |
:candy: |
:lollipop: |
:honey_pot: |
:apple: |
:green_apple: |
:tangerine: |
:lemon: |
:cherries: |
:grapes: |
:watermelon: |
:strawberry: |
:peach: |
:melon: |
:banana: |
:pear: |
:pineapple: |
:sweet_potato: |
:eggplant: |
:tomato: |
:corn: |
Places
:house: |
:house_with_garden: |
:school: |
|---|---|---|
:office: |
:post_office: |
:hospital: |
:bank: |
:convenience_store: |
:love_hotel: |
:hotel: |
:wedding: |
⛪️ :church: |
:department_store: |
:european_post_office: |
:city_sunrise: |
:city_sunset: |
:japanese_castle: |
:european_castle: |
⛺️ :tent: |
:factory: |
:tokyo_tower: |
:japan: |
:mount_fuji: |
:sunrise_over_mountains: |
:sunrise: |
:stars: |
:statue_of_liberty: |
:bridge_at_night: |
:carousel_horse: |
:rainbow: |
:ferris_wheel: |
⛲️ :fountain: |
:roller_coaster: |
:ship: |
:speedboat: |
⛵️ :boat: |
⛵️ :sailboat: |
:rowboat: |
⚓️ :anchor: |
:rocket: |
✈️ :airplane: |
:helicopter: |
:steam_locomotive: |
:tram: |
:mountain_railway: |
:bike: |
:aerial_tramway: |
:suspension_railway: |
:mountain_cableway: |
:tractor: |
:blue_car: |
:oncoming_automobile: |
:car: |
:red_car: |
:taxi: |
:oncoming_taxi: |
:articulated_lorry: |
:bus: |
:oncoming_bus: |
:rotating_light: |
:police_car: |
:oncoming_police_car: |
:fire_engine: |
:ambulance: |
:minibus: |
:truck: |
:train: |
:station: |
:train2: |
:bullettrain_front: |
:bullettrain_side: |
:light_rail: |
:monorail: |
:railway_car: |
:trolleybus: |
:ticket: |
⛽️ :fuelpump: |
:vertical_traffic_light: |
:traffic_light: |
⚠️ :warning: |
:construction: |
:beginner: |
:atm: |
:slot_machine: |
:busstop: |
:barber: |
♨️ :hotsprings: |
:checkered_flag: |
:crossed_flags: |
:izakaya_lantern: |
:moyai: |
:circus_tent: |
:performing_arts: |
:round_pushpin: |
:triangular_flag_on_post: |
:jp: |
:kr: |
:cn: |
:us: |
:fr: |
:es: |
:it: |
:ru: |
:gb: |
:uk: |
:de: |
Symbols
1️⃣ :one: |
2️⃣ :two: |
3️⃣ :three: |
|---|---|---|
4️⃣ :four: |
5️⃣ :five: |
6️⃣ :six: |
7️⃣ :seven: |
8️⃣ :eight: |
9️⃣ :nine: |
:keycap_ten: |
:1234: |
0️⃣ :zero: |
#️⃣ :hash: |
:symbols: |
◀️ :arrow_backward: |
⬇️ :arrow_down: |
▶️ :arrow_forward: |
⬅️ :arrow_left: |
:capital_abcd: |
:abcd: |
:abc: |
↙️ :arrow_lower_left: |
↘️ :arrow_lower_right: |
➡️ :arrow_right: |
⬆️ :arrow_up: |
↖️ :arrow_upper_left: |
↗️ :arrow_upper_right: |
⏬ :arrow_double_down: |
⏫ :arrow_double_up: |
:arrow_down_small: |
⤵️ :arrow_heading_down: |
⤴️ :arrow_heading_up: |
↩️:leftwards_arrow_with_hook: |
↪️ :arrow_right_hook: |
↔️ :left_right_arrow: |
↕️ :arrow_up_down: |
:arrow_up_small: |
:arrows_clockwise: |
:arrows_counterclockwise: |
⏪ :rewind: |
⏩ :fast_forward: |
ℹ️ :information_source: |
:ok: |
:twisted_rightwards_arrows: |
:repeat: |
:repeat_one: |
:new: |
:top: |
:up: |
:cool: |
:free: |
:ng: |
:cinema: |
:koko: |
:signal_strength: |
:u5272: |
:u5408: |
:u55b6: |
️ :u6307: |
️ :u6708: |
:u6709: |
:u6e80: |
️ :u7121: |
:u7533: |
:u7a7a: |
:u7981: |
️ :sa: |
:restroom: |
:mens: |
:womens: |
:baby_symbol: |
:no_smoking: |
️ :parking: |
♿️ :wheelchair: |
:metro: |
:baggage_claim: |
:accept: |
:wc: |
:potable_water: |
:put_litter_in_its_place: |
㊙️ :secret: |
㊗️ :congratulations: |
Ⓜ️ :m: |
:passport_control: |
:left_luggage: |
:customs: |
:ideograph_advantage: |
:cl: |
:sos: |
:id: |
:no_entry_sign: |
:underage: |
:no_mobile_phones: |
:do_not_litter: |
:non-potable_water: |
:no_bicycles: |
:no_pedestrians: |
:children_crossing: |
⛔️ :no_entry: |
✳️ :eight_spoked_asterisk: |
✴️ :eight_pointed_black_star: |
:heart_decoration: |
:vs: |
:vibration_mode: |
:mobile_phone_off: |
:chart: |
:currency_exchange: |
♈️ :aries: |
♉️ :taurus: |
♊️ :gemini: |
♋️ :cancer: |
♌️ :leo: |
♍️ :virgo: |
♎️ :libra: |
♏️ :scorpius: |
♐️ :sagittarius: |
♑️ :capricorn: |
♒️ :aquarius: |
♓️ :pisces: |
⛎ :ophiuchus: |
:six_pointed_star: |
❎:negative_squared_cross_mark: |
️ :a: |
️ :b: |
:ab: |
️ :o2: |
:diamond_shape_with_a_dot_inside: |
♻️ :recycle: |
:end: |
:on: |
:soon: |
:clock1: |
:clock130: |
:clock10: |
:clock1030: |
:clock11: |
:clock1130: |
:clock12: |
:clock1230: |
:clock2: |
:clock230: |
:clock3: |
:clock330: |
:clock4: |
:clock430: |
:clock5: |
:clock530: |
:clock6: |
:clock630: |
:clock7: |
:clock730: |
:clock8: |
:clock830: |
:clock9: |
:clock930: |
:heavy_dollar_sign: |
©️ :copyright: |
®️ :registered: |
™️ :tm: |
❌ :x: |
❗️ :heavy_exclamation_mark: |
‼️ :bangbang: |
⁉️ :interrobang: |
⭕️ :o: |
✖️ :heavy_multiplication_x: |
➕ :heavy_plus_sign: |
➖ :heavy_minus_sign: |
➗ :heavy_division_sign: |
:white_flower: |
:100: |
✔️ :heavy_check_mark: |
☑️ :ballot_box_with_check: |
:radio_button: |
:link: |
➰ :curly_loop: |
〰️ :wavy_dash: |
〽️ :part_alternation_mark: |
:trident: |
:black_square: :black_square: |
:white_square: :white_square: |
✅ :white_check_mark: |
:black_square_button: |
:white_square_button: |
⚫️ :black_circle: |
⚪️ :white_circle: |
:red_circle: |
:large_blue_circle: |
:large_blue_diamond: |
:large_orange_diamond: |
:small_blue_diamond: |
:small_orange_diamond: |
:small_red_triangle: |
:small_red_triangle_down: |
画图(Mermaid)
Mermaid 是一种简单的类似 Markdown 的脚本语言，通过 JavaScript 编程语言，将文本转换为图片。因此，真正实现画图功能的并不是 Typora 本身，它只是内置了对 Mermaid 的支持
Mermaid 支持绘制非常多种类的图，常见的有时序图、流程图、类图、甘特图等等。下面分享一下如何绘制这些图，语法非常容易掌握。
先在 Typora 中，输入 ```mermaid 然后敲击回车，即可初始化一张空白图。
graph（流程图）
在下列各种图的代码块外 开始添加 mermaid 结尾添加即可
- 节点名不能与关键字同名
- 使用引号可以避免一些不必要的麻烦，如避免与关键字同名
关键字graph表示一个流程图的开始，同时需要指定该图的方向
图方向
- TB，从上到下
- TD，从上到下
- BT，从下到上
- RL，从右到左
- LR，从左到右
T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN
graph LR;
A-->B
B-->C
C-->D
D-->A
效果如下：
A
B
C
D
节点形状
- 默认节点 A
- 文本节点 B[bname]
- 圆角节点 C(cname)
- 圆形节点 D((dname))
- 非对称节点 E>ename]
- 菱形节点 F{fname}
A~F 是当前节点名字，类似于变量名，画图时便于引用
[b~f]name是节点中显示的文字，默认节点的名字和显示的文字都为A
graph TB
A
B[bname]
C(cname)
D((dname))
E>ename]
F{fname}
效果如下：
A
bname
cname
dname
ename
fname
连线
节点间的连接线有多种形状，可以在连接线中加入标签：
- 箭头连接 A1–->B1
- 开放连接 A2—B2
- 标签连接 A3–text—B3
- 箭头标签连接 A4–text–>B4
- 虚线开放连接 A5.-B5
- 虚线箭头连接 A6-.->B6
- 标签虚线连接 A7-.text.-B7
- 标签虚线箭头连接 A8-.text.->B8
- 粗线开放连接 A9===B9
- 粗线箭头连接 A10==>B10
- 标签粗线开放连接 A11==text===B11
- 标签粗线箭头连接 A12==text==>B12
graph TB
A1-->B1
A2---B2
A3--text---B3
A4--text-->B4
A5-.-B5
A6-.->B6
A7-.text.-B7
A8-.text.->B8
A9===B9
A10==>B10
A11==text===B11
A12==text==>B12
效果如下：
text
text
text
text
text
text
A1
B1
A2
B2
A3
B3
A4
B4
A5
B5
A6
B6
A7
B7
A8
B8
A9
B9
A10
B10
A11
B11
A12
B12
example
graph LR
start("input x") --> handler("x > 0?")
handler --yes--> yes("output x")
handler --no--> start
yes --> exit("exit")
效果如下：
yes
no
input x
x > 0?
output x
exit
subgraph（子图）
格式
# 外面的那层, 可以使用子图中的节点，子图中的节点名不是隔离的，可以认为是全局变量-.-
graph LR
subgraph title1
graph definition
end
subgraph title2
graph definition
end
...
如
graph LR
subgraph g1
a1-->b1
end
subgraph g2
a2-->b2
end
subgraph g3
a3-->b3
end
a3-->a2
效果如下：
g3
g2
g1
b3
a3
b2
a2
b1
a1
sequence diagram （UML时序图）
关键字
-
participant，参与者，相当先定义模块，可通过设定参与者(participant)的顺序控制展示顺序
-
note， 便签，格式如下
note [right of | left of][Actor]:Text # 给多个模块做标签, 通过逗号分割 note over [Actor1, Actor2...]:Text -
循环
loop Loop_text ... statements... end -
选择
alt Describing_text ...statements... else ...statements... end # 推荐在没有else的情况下使用 opt(option,选择) opt Describing_text ...statements... end实例：
sequenceDiagram Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice:not so good :( else is well Bob->>Alice:good end opt Extra response Bob->>Alice:Thanks for asking end效果如下：
Alice Bob Hello Bob, how are you? not so good :( good alt [is sick] [is well] Thanks for asking opt [Extra response] Alice Bob 序列图sequence 示例
连线
- 无箭头实线 ->
- 有箭头实线 ->>
- 无箭头虚线 –>
- 有箭头虚线 –>>
- 带x实线 -x
- 带x虚线 –x
如
sequenceDiagram
Note right of A: 倒霉, 碰到B了
A->B: Hello B, how are you ?
note left of B: 倒霉,碰到A了
B-->A: Fine, thx, and you?
note over A,B: 快点溜，太麻烦了
A->>B: I'm fine too.
note left of B: 快点打发了A
B-->>A: Great!
note right of A: 溜之大吉
A-xB: Wait a moment
loop Look B every minute
A->>B: look B, go?
B->>A: let me go?
end
B--xA: I'm off, byte
note right of A: 太好了, 他走了
效果如下：
A B 倒霉, 碰到B了 Hello B, how are you ? 倒霉,碰到A了 Fine, thx, and you? 快点溜，太麻烦了 I'm fine too. 快点打发了A Great! 溜之大吉 Wait a moment look B, go? let me go? loop [Look B every minute] I'm off, byte 太好了, 他走了 A B 序列图sequence 示例
想改变AB的顺序怎么办呢？
sequenceDiagram
#通过设定参与者(participant)的顺序控制展示顺序
participant B
participant A
Note right of A: 倒霉, 碰到B了
A->B: Hello B, how are you ?
note left of B: 倒霉,碰到A了
B-->A: Fine, thx, and you?
note over A,B:快点溜，太麻烦了。。。
A->>B: I'm fine too.
note left of B: 快点打发了A
B-->>A: Great!
note right of A: 溜之大吉
A-xB: Wait a moment
loop Look B every minute
A->>B: look B, go?
B->>A: let me go?
end
B--xA: I'm off, byte
note right of A: 太好了, 他走了
效果如下：
B A 倒霉, 碰到B了 Hello B, how are you ? 倒霉,碰到A了 Fine, thx, and you? 快点溜，太麻烦了。。。 I'm fine too. 快点打发了A Great! 溜之大吉 Wait a moment look B, go? let me go? loop [Look B every minute] I'm off, byte 太好了, 他走了 B A 序列图sequence 示例
sequenceDiagram
#通过设定参与者(participants)的顺序控制展示模块顺序
participant Alice
participant Bob
participant John
Alice->John:Hello John, how are you?
loop Healthcheck
John->John:Fight against hypochondria
end
Note right of John:Rational thoughts <br/>prevail...
John-->Alice:Great!
John->Bob: How about you?
Bob-->John: good!
Alice Bob John Hello John, how are you? Fight against hypochondria loop [Healthcheck] Rational thoughts prevail... Great! How about you? good! Alice Bob John 序列图sequence 示例
gantt diagram(甘特图)
甘特图是一类条形图，由Karol Adamiechi在1896年提出, 而在1910年Henry Gantt也独立的提出了此种图形表示。通常用在对项目终端元素和总结元素的开始及完成时间进行的描述
关键字
| title | 标题 |
|---|---|
| dateFormat | 日期格式 |
| section | 模块 |
| Completed | 已经完成 |
| Active | 当前正在进行 |
| Future | 后续待处理 |
| crit | 关键阶段 |
| 日期缺失 | 默认从上一项完成后 |
gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d
效果如下：
Mon 06 Mon 13 Mon 20 T1 T2 T3 S1 S2 S3
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
效果如下：
Mon 06 Mon 13 Mon 20 Completed task Active task Future task Future task2 Completed task in the critical line Implement parser and jison Create tests for parser Future task in critical line Create tests for renderer Add to mermaid Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page A section Critical tasks Documentation Last section Adding GANTT diagram functionality to mermaid
sequence（序列图）
关键字
- title，定义序列图的标题
- participant，定义时序图中的对象
- note，定义对时序图中的部分说明
方位控制
- left of，表示当前对象的左侧
- right of，表示当前对象的右侧
- over，表示覆盖在当前对象（们）的上面
- {actor}，表示时序图中的具体对象（名称自定义）
- 箭头分为以下几种：
- -> 表示实线实箭头
- –> 表示虚线实箭头
- ->> 表示实线虚箭头
- –>> 表示虚线虚箭头
example
代码使用模式使用sequence
title: 序列图sequence 示例
# participant, 参与者
participant A
participant B
participant C
note left of A: A左侧说明
note over B: 覆盖B的说明
note right of C: C右侧说明
# - 代表实线, -- 代表虚线; > 代表实箭头, >> 代表虚箭头
A->A:自己到自己
A->B:实线实箭头
A-->C:虚线实箭头
B->>C:实线虚箭头
B-->>A:虚线虚箭头
效果如下：
A B C A左侧说明 覆盖B的说明 C右侧说明 自己到自己 实线实箭头 虚线实箭头 实线虚箭头 虚线虚箭头 A B C 序列图sequence 示例
定义可以省略如
A->B: 吃饭了没？
# 可在文本中使用换行符\n
note right of B: B思考n秒\n如何回答
B--A: 吃过了。你咧？
A->>B: 吃过了，吃过了！
效果如下：
sequenceDiagram
A->>B: 吃饭了没？
# 可在文本中使用换行符\n
note right of B: B思考n秒\n如何回答
B--A: 吃过了。你咧？
A->>B: 吃过了，吃过了！
AABB吃饭了没？B思考n秒如何回答吃过了。你咧？吃过了，吃过了！
flow（流程图)
代码模板使用flow
关键字
- start/end，表示程序的开始与结束
- operation，表示程序的处理块
- subroutine，表示子程序块
- condition，表示程序的条件判断
- inputoutput，表示程序的出入输出
- right/left，表示当前连线在当前模块上的起点(默认从下端开始)
- yes/no， 表示condition判断的分支(可以和right，left同时使用)
通过定义模块与连接，再结合以上关键词即可定义简单流程图的各个模块。
模块定义(模块标识与模块名称可以任意定义名称，但是不能为关键词)：
模块标识(相当于变量名)=>模块关键词: 模块名称(模块中显示的文字)
连接定义如下:
模块标识1->模块标识2
模块标识1->模块标识2->模块标识3
进行连接的时候，可以通过right，left确定箭头的起点。
使用condition关键词定义的判断框的连接需要结合yes或者no使用，如
cond1=>condition: x>0?
cond1(yes)->module1
cond1(no)->moudle2
#指定方向,如果后面占用了这个方向, 前面的无效
cond1(yes,right)->module1
cond1(no)->moudle2
#先自定义变量,然后画图
st=>start: 开始
e=>end: 结束
op=>operation: 输入x
sub=>subroutine: 是否重新输入
cond1=>condition: x>0?
cond2=>condition: yes/no
io=>inputoutput: 输出x
st(right)->op->cond1
cond1(yes)->io(right)->e
cond1(no)->sub(right)->cond2()
cond2(yes, right)->op
cond2(no)->e
效果如下：
Created with Raphaël 2.3.0 开始 输入x x>0? 输出x 结束 是否重新输入 yes/no yes no yes no
Class diagram(类图)
语法解释：<|-- 表示继承，+ 表示 public，- 表示 private，学过 Java 的应该都知道。
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
效果如下:
Animal
+int age
+String gender
+isMammal()
+mate()
Duck
+String beakColor
+swim()
+quack()
Fish
-int sizeInFeet
-canEat()
Zebra
+bool is_wild
+run()
StateDiagram(状态图)
语法解释：[*] 表示开始或者结束，如果在箭头右边则表示结束。
stateDiagram
[*] --> s1
s1 --> [*]
效果如下：
s1
饼图
饼图使用 pie 表示，标题下面分别是区域名称及其百分比。
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
效果如下：
40% 46% 9% 5% Key elements in Product X Calcium Potassium Magnesium Iron
转载常用表情地址: https://blog.csdn.net/qq_41904729/article/details/115343659
学习画图: https://blog.csdn.net/whatday/article/details/88655461
https://blog.csdn.net/weixin_26850069/article/details/112702748