cesarszv/obsidian-skills

Overview

This skill teaches a creative methodology for using Mermaid.js as a declarative infographic engine to produce infographic-style diagrams rather than plain technical flowcharts. It focuses on visual storytelling, spatial layout, reusable styling, and accessibility to make diagrams more engaging and communicative. The approach emphasizes readable source code and repeatable workflows so diagrams are both beautiful and verifiable.

How this skill works

The method reinterprets Mermaid primitives—nodes, edges, subgraphs, and classDef—as infographic building blocks: emojis as actors, subgraphs as semantic containers, invisible links for implicit grids, and classDef themes for contrast. It prescribes accessibility metadata, consistent flow direction, meaningful IDs, and structured code sections so the output renders predictably and remains maintainable. The result is an expressive, narrative diagram that highlights focal elements, mutes context, and preserves element identity across transformations.

When to use it

• Explaining processes to non-technical audiences where visual metaphors help comprehension
• Creating educational diagrams or slide visuals that must be concise and aesthetically pleasing
• Documenting sampling, selection, or transformation flows where element identity should be preserved
• Designing dashboards or notes in Obsidian.md that benefit from compact, readable diagrams
• Prototyping conceptual models that need clear hierarchy and attention guidance

Best practices

• Start each diagram with accTitle and accDescr to support accessibility and self-documentation
• Choose flow direction deliberately (TD for hierarchy, LR for sequences) and avoid mixing directions globally
• Define reusable classDef styles for neutral and highlighted states rather than styling nodes individually
• Use meaningful, short alphanumeric node IDs and wrap complex labels in double quotes to avoid parsing issues
• Create implicit grids with invisible links (~~~) and organize nodes into subgraphs to control spatial layout and grouping

Example use cases

• An Obsidian note showing a population → sampling transformation with selected IDs preserved
• A training slide that tells a product onboarding story using emojis as actors and narrative edge labels
• A research methods visual that mutes background cohorts while highlighting focal subgroups with contrasting classDef styles
• A timeline of events rendered LR, using subgraphs as phases and invisible links to keep items aligned